С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.53/19: Рейтинг темы: голосов - 19, средняя оценка - 4.53
VadimuSSS
2 / 2 / 0
Регистрация: 23.06.2014
Сообщений: 167
1

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

19.07.2014, 14:53. Просмотров 3496. Ответов 3
Метки нет (Все метки)

Столкнулся с проблемой, что градиентная заливка не может быть совмещена с изображением. Тоесть, Либо изображение, либо градиент. Как сделать, что бы изображение наложилось поверх градиента..? Ранее я в css прописывал градиент, а в HTML добавлял изображение при помощи <img>. Однако, я не думаю что это правильный способ...Как все это реализовать в CSS. Заранее спасибо.
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
19.07.2014, 14:53
Ответы с готовыми решениями:

Изображение в блоке повторяется не до конца
Проблема с background-repeat В настройках сайта изначальный задан фикс размер 1000px, и если...

Изображение в блоке неправильной формы
Добрый день! Скажите, пожалуйста, каким образом вставить фоновую картинку в блок, таким образом...

Как разместить в блоке изображение справа
Здравствуйте. Как в div разместить img справа? Прижать к правой стороне? Я додумалась до 2х...

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

Изменение в одном блоке при нажатии в другом блоке
Скажите возможно ли с помощью CSS или HTML(что мало вероятно) сделать так чтобы если я...

3
Crystal-3
76 / 72 / 38
Регистрация: 04.04.2014
Сообщений: 223
19.07.2014, 17:08 2
Цитата Сообщение от VadimuSSS Посмотреть сообщение
градиентная заливка не может быть совмещена с изображением
Ошибаетесь, можно всё
Читайте:http://htmlbook.ru/css3-na-primerakh/neskolko-fonovykh-risunkov
0
VadimuSSS
2 / 2 / 0
Регистрация: 23.06.2014
Сообщений: 167
20.07.2014, 18:22  [ТС] 3
в примере html-book все предельно просто, в моем же случае у меня не получается совместить градиенты "колорзиллы" и простенький рисунок...
CSS
1
2
3
4
5
6
7
8
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);
пробовал добавить через запятую картинку, но не получалось. в общем пробовал по всякому но ничего не увенчалось успехом.
0
Sabio
57 / 57 / 14
Регистрация: 24.06.2013
Сообщений: 265
20.07.2014, 19:09 4
Лучший ответ Сообщение было отмечено Taatshi как решение

Решение

Всё работает. Чтобы изображение было выше, оно должно идти раньше градиента:
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%);
1
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
20.07.2014, 19:09

Подскажите, как сделать в html, чтобы изображение накладывалось на другое изображение?
Нужно, чтобы изображение накладывалось на другое изображение, а другое изображение растягивалось по...

При наведении на изображение,изображение должн немного затемнится и + по центру изображения треугольник
Вот допустим у меня 3 картинки: нужно чтоб при наведении на любую из них,затемнялось и картинка...

Как сделать прозрачным фон изображение, а не само изображение?


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
4
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru