Градиентная заливка + изображение в блоке

@VadimuSSS · Регистрация: 23.06.2014

Author24 — интернет-сервис помощи студентам

Столкнулся с проблемой, что градиентная заливка не может быть совмещена с изображением. Тоесть, Либо изображение, либо градиент. Как сделать, что бы изображение наложилось поверх градиента..? Ранее я в css прописывал градиент, а в HTML добавлял изображение при помощи <img>. Однако, я не думаю что это правильный способ...Как все это реализовать в CSS. Заранее спасибо.

@Crystal-3 · 19.07.2014, 17:08

Сообщение от VadimuSSS

градиентная заливка не может быть совмещена с изображением

Ошибаетесь, можно всё

Читайте:http://htmlbook.ru/css3-na-pri... h-risunkov

@VadimuSSS · 20.07.2014, 18:22 **[ТС]**

в примере html-book все предельно просто, в моем же случае у меня не получается совместить градиенты "колорзиллы" и простенький рисунок...

CSS

background: rgb(30,133,154); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(30,133,154,1) 0%, rgba(42,201,216,1) 50%, rgba(32,185,202,1) 51%, rgba(126,225,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,133,154,1)), color-stop(50%,rgba(42,201,216,1)), color-stop(51%,rgba(32,185,202,1)), color-stop(100%,rgba(126,225,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,133,154,1) 0%,rgba(42,201,216,1) 50%,rgba(32,185,202,1) 51%,rgba(126,225,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,133,154,1) 0%,rgba(42,201,216,1) 50%,rgba(32,185,202,1) 51%,rgba(126,225,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,133,154,1) 0%,rgba(42,201,216,1) 50%,rgba(32,185,202,1) 51%,rgba(126,225,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,133,154,1) 0%,rgba(42,201,216,1) 50%,rgba(32,185,202,1) 51%,rgba(126,225,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e859a', endColorstr='#7ee1e8',GradientType=0 ); /* IE6-9 */

CSS

1	background-image:url(../img/stroy.png);

пробовал добавить через запятую картинку, но не получалось. в общем пробовал по всякому но ничего не увенчалось успехом.

@Sabio · 20.07.2014, 19:09

Всё работает. Чтобы изображение было выше, оно должно идти раньше градиента:

CSS

1	background:url(../img/stroy.png) no-repeat, linear-gradient(to bottom, rgba(30,133,154,1) 0%,rgba(42,201,216,1) 50%,rgba(32,185,202,1) 51%,rgba(126,225,232,1) 100%);

@VadimuSSS 2 / 2 / 0 Регистрация: 23.06.2014 Сообщений: 167
		1
	Градиентная заливка + изображение в блоке 19.07.2014, 14:53. Показов 4770. Ответов 3 Метки нет (Все метки) Столкнулся с проблемой, что градиентная заливка не может быть совмещена с изображением. Тоесть, Либо изображение, либо градиент. Как сделать, что бы изображение наложилось поверх градиента..? Ранее я в css прописывал градиент, а в HTML добавлял изображение при помощи <img>. Однако, я не думаю что это правильный способ...Как все это реализовать в CSS. Заранее спасибо. 0

@Crystal-3 115 / 97 / 54 Регистрация: 04.04.2014 Сообщений: 293
	19.07.2014, 17:08	2
	Сообщение от VadimuSSS градиентная заливка не может быть совмещена с изображением Ошибаетесь, можно всё Читайте:http://htmlbook.ru/css3-na-pri... h-risunkov 0

	20.07.2014, 19:09

Градиентная заливка + изображение в блоке

Решение