Градиент поверх повторяющегося фонового рисунка

@fol · Регистрация: 08.07.2013

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

Здравствуйте.
Задача: фоном для боди сделать картинку по центру сверху, также доп фоном - повторяющийся узор и на узор положить градиент (сверху прозрачность 0%, снизу - где-то 70%). Картинки нормально отображаются, а градиент не работает.
Описание стилей снизу не помогает:

CSS
1
2
3
4
5
body {
    background: url("img/head_collage.png") no-repeat scroll center 0px, 
    url("img/repeat.png") repeat, 
    linear-gradient(to top, #faec73 100%, #ffffff 0%) transparent  100% 0% ;
    }

Помогите, пожалуйста, сориентироваться. Спасибо.

@S-senj · 21.11.2013, 19:45

попробуй через градиент-генераторы градиент добавить, либо ищи в инете почему не отображается градиент в том или ином браузере
на всякий случай даю ссылку на один из градиент-генераторов: http://www.colorzilla.com/gradient-editor/

@fol · 22.11.2013, 00:18 **[ТС]**

по ссылке просто генератор градиентов, но там не объясняется, как положить на изображение градиент с пятидесятипроцентной прозрачностью на 100% страницы в высоту

вопрос остается открытым

@S-senj · 22.11.2013, 00:38

а что если градиент положить в отдельный блок и уже ему задать прозрачность через opacity или rgba() ?

@fol · 24.11.2013, 18:32 **[ТС]**

Сообщение от S-senj

а что если градиент положить в отдельный блок и уже ему задать прозрачность через opacity или rgba() ?

Спасибо, помогло.
После экспериментов остановился на таком варианте:

в body вложил 2 дива: bg и bg_up и задал свойства

CSS
1
2
3
4
5
6
7
8
9
body {
    background:  url("img/repeat.png") repeat; /*повторяющийся узор*/
    }
    
#bg {
    background-image: linear-gradient(to bottom, rgba(250,250,250,0.1), rgba(250,236,115,0.3),  rgba(250,236,115,0.5));position:relative; /*градиент поверх узора*/
    }
 
#bg_up {background:  url("img/head_collage.png") no-repeat scroll center 0px;} /*картинка сверху в качестве фона*/

@S-senj · 24.11.2013, 22:42

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

Спасибо, помогло.

Всегда пожалуйста.
Только смотри, в более поздних версиях IE не поддерживается свойство opacity, используй filter: alpha(opacity=50).
Если нужно, конечно

Новые блоги и статьи Все статьи Все блоги /
Как я обхитрил таблицу Word Alexander-7 21.03.2026 Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .	Krabik - рыболовный бот для WoW 3.3.5a AmbA 21.03.2026 без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .	Программный отбор значений справочника Maks 21.03.2026 Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .	Переходник USB-CAN-GPIO Eddy_Em 20.03.2026 Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .

@S-senj 31 / 31 / 0 Регистрация: 05.07.2012 Сообщений: 130
	21.11.2013, 19:45
	попробуй через градиент-генераторы градиент добавить, либо ищи в инете почему не отображается градиент в том или ином браузере на всякий случай даю ссылку на один из градиент-генераторов: http://www.colorzilla.com/gradient-editor/ 0

@fol 511 / 485 / 161 Регистрация: 08.07.2013 Сообщений: 1,714 Записей в блоге: 1
	22.11.2013, 00:18 [ТС]
	по ссылке просто генератор градиентов, но там не объясняется, как положить на изображение градиент с пятидесятипроцентной прозрачностью на 100% страницы в высоту вопрос остается открытым 0

@S-senj 31 / 31 / 0 Регистрация: 05.07.2012 Сообщений: 130
	22.11.2013, 00:38
	а что если градиент положить в отдельный блок и уже ему задать прозрачность через opacity или rgba() ? 1