Как наложить на изображение цвет в CSS?
Я хочу наложение цвета на этот элемент заголовка. Как я могу сделать это с помощью CSS?
Код
#header < /* Original url */ /*background: url(../img/bg.jpg) 0 0 no-repeat fixed;*/ background: url(https://fakeimg.pl/250x100/) 0 0 no-repeat fixed; height: 100%; overflow: hidden; color: #FFFFFF >LittleLebowski 15 Сен 2013 в 21:12
Объясните, пожалуйста, «наложение цвета». Какой именно эффект вы ищете?
15 Сен 2013 в 21:14
Это было бы слишком жестко. Я хочу сделать A / B-тест наложения цвета.
LittleLebowski
15 Сен 2013 в 21:15
Используйте инструменты разработчика в своем любимом браузере! Затем вы увидите, что это просто достигается с помощью фонового изображения и фонового цвета с прозрачностью с помощью RGBA: .home-page
15 Сен 2013 в 21:20
12 ответов
Лучший ответ
Вы должны использовать rgba для наложения вашего элемента на фотографии. Rgba — это способ объявить цвет в CSS, который включает поддержку альфа-прозрачности. вы можете использовать .row как наложение, например:
#header < background: url(../img/bg.jpg) 0 0 no-repeat fixed; height: 100%; overflow: hidden; color: #FFFFFF >.row
MaxiGui 6 Фев 2021 в 14:10
Обратите внимание на важность z-index для этого 🙂
21 Сен 2018 в 12:35
Я также хотел бы отметить, что вы можете использовать hsla () или hex с альфа-каналом.
corn on the cob
11 Окт 2020 в 19:48
Вы можете использовать функцию hue-rotate в свойстве filter . Это довольно непонятное измерение, вам нужно знать, на сколько градусов нужно повернуть цветовое колесо, чтобы достичь желаемого оттенка, например:
header
Как только вы найдете правильный оттенок, вы можете объединить функции brightness и grayscale или saturate , чтобы найти правильный оттенок, например:
header
Свойство filter имеет префикс поставщика в Webkit, поэтому окончательный код будет следующим:
header
Lewis Donovan 16 Мар 2020 в 16:29
#header.overlay
Что-то вроде этого. Очевидно, просто добавьте класс overlay в заголовок.
DevlshOne 15 Сен 2013 в 21:29
Если я сделаю это, содержимое моего заголовка станет слишком тусклым из-за непрозрачности. Любой обходной путь?
LittleLebowski
15 Сен 2013 в 21:23
Возможно, вам придется создать два расположенных absolutely элемента друг над другом. Один с изображением, а другой с наложением цвета.
15 Сен 2013 в 21:27
Во вспомогательной смене они использовали класс home-page как
HTML
CSS
.home-page < background: transparent url("../images/backgrounds/image-overlay.png") repeat 0 0; background: rgba(39,62,84,0.82); overflow: hidden; height: 100%; z-index: 2; >Вы можете попробовать что-то подобное
Community 20 Июн 2020 в 12:12
Используйте mutple backgorund для элемента и используйте linear-gradient в качестве наложения цвета, объявив как начало, так и конец цвета как одно и то же значение.
Обратите внимание, что слои в объявлении с несколькими фонами читаются так же, как они отображаются, сверху вниз, поэтому сначала поместите наложение, а затем изображение bg:
#header < background: linear-gradient(to bottom, rgba(100, 100, 0, 0.5), rgba(100, 100, 0, 0.5)), url(../img/bg.jpg) 0 0 no-repeat fixed; height: 100%; overflow: hidden; color: #FFFFFF >mindfullsilence 26 Янв 2022 в 21:39
Если вы не против использования абсолютного позиционирования, вы можете расположить фоновое изображение, а затем добавить наложение, используя непрозрачность.
div < width:50px; height:50px; background: url('http://images1.wikia.nocookie.net/__cb20120626155442/adventuretimewithfinnandjake/images/6/67/Link.gif'); position:absolute; left:0; top:0; >.overlay
Conqueror 15 Сен 2013 в 21:26
Вот креативная идея с использованием box-shadow :
#header
Что происходит
- background устанавливает фон для вашего элемента.
- box-shadow — важный бит. Он в основном устанавливает действительно большую тень внутри элемента поверх фона, которая является полупрозрачной.
corn on the cob 3 Окт 2020 в 20:09
Спас мой день с box-shadow , большое спасибо
21 Апр 2021 в 02:24
Великолепно! Лучший ответ.
Tsar Bomba
3 Фев 2022 в 15:40
Вы также можете добавить дополнительный класс с такими настройками. Наложение не будет перекрывать контент, и никаких дополнительных тегов не требуется.
.overlay < position: relative; z-index: 0; >.overlay::after < content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: red; opacity: .6; /* . */ z-index: -1; >Zeroox 26 Апр 2020 в 20:56
Если вы хотите просто добавить класс для добавления наложения:
span < padding: 5px; >.green < background-color: green; color: #FFF; >.overlayed < position: relative; >.overlayed::before < content: ' '; z-index: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: #00000080; >.stand-out
with overlay without overlay
I stand out Важно: элемент, в который вы помещаете класс overlayed , должен иметь набор position . В противном случае элемент ::before примет размер другого родительского элемента. В моем примере я установил положение «относительное» с помощью правила .overlayed , но в вашем случае вам может потребоваться «абсолютное» или какое-либо другое значение.
Кроме того, убедитесь, что z-index класса overlayed выше, чем у возможных дочерних элементов контейнера, если только вы не хотите, чтобы они «выделялись» и не перекрывались (как с диапазоном с классом stand-out в моем фрагменте).
nonzaprej 24 Апр 2020 в 16:30
Можно использовать негативный сверхтолстый полупрозрачный бордюр .
Anything can be red. Or even image.
Это решение требует, чтобы вы знали точные размеры закрываемого объекта.
elixon 24 Авг 2018 в 21:53
Чтобы добавить наложение, вы можете использовать свойство CSS background-blend-mode примерно так:
#header < background: url("img/image.jpg") 0 0 no-repeat fixed; height: 100%; overflow: hidden; background-color: hsl(206, 27%, 38%); background-blend-mode: multiply; >Tammibriggs 4 Окт 2021 в 20:37
Этот ответ хорошо работает с фонами, к которым уже применено изображение, например, к div WordPress, которому было назначено фоновое изображение в конструкторе страниц. В этом случае вы можете опустить: «background: url. «
mHenderson
22 Мар 2022 в 20:00
Вы можете сделать это в одной строке (#3204fde6, #9907fae6) вместо rgba (rgba(48, 3, 252, 0.902), rgba(153, 7, 250, 0.902) .
header < height: 100vh; width: 100%; color: white; font: bold 6.5em/2em monospace; display: flex; justify-content: center; align-items: center; background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center; >Hello World Как наложить цвет на фон в css
Прежде всего на добавление наложения фонового изображения CSS, это самый динамичный способ создания тонированных изображений страниц. Он стал популярным для многих веб сайтов, которые появляются на главной странице в качестве баннеров.
Самое замечательное в добавлении фонового изображения наложения, это то, что вы можете просто изменить любое изображение «обычное изображение без фильтра» динамически и опубликовать его на сайте с помощью фильтра, при помощи CSS.
Итак, как это сделать?
1. Вариант идет как градиент, где можно задать в самом верху и в низу разную палитру. В свойстве background добавляется линейный градиент и URL-адрес изображения, где будет использоваться градиентный фон с прозрачностью.
Вместо использования прозрачного цвета потока, использующего rgba или hsla, где можно использовать градиент. Градиенты технически background-imageс и следовательно не подчиняются правилу.
Также можно использовать линейный градиент без прозрачности и добавить режим background-blend-mode: soft-light и добавить знаки. В результате изображение и цвет смешиваются вместе с основным снимком. В отличие от другого способа, которым можно настроить непрозрачным.
Код CSS должен выглядеть так:
В заключение добавление эффекта цветового фильтра может быть выполнено двумя способами. Первый — это свойство фона с линейным градиентом и URL-адресом изображения.
Другой, это добавить сплошной цвет в параметр линейного градиента и добавить свойство background-blend-mode плюс заголовок.
background-blend-mode¶
Свойство background-blend-mode описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов.
Синтаксис¶
Значения¶
Спецификации¶
Поддержка браузерами¶
Can I Use css-backgroundblendmode? Data on support for the css-backgroundblendmode feature across the major browsers from caniuse.com.
Описание и примеры¶
normal¶
Конечный цвет — это верхний цвет, независимо от того, что представляет собой нижний цвет. Эффект подобен двум непрозрачным кускам бумаги, перекрывающимся друг над другом.
multiply¶
Конечный цвет — результат умножения верхнего и нижнего цветов. Черный слой приводит к черному окончательному слою, а белый слой не приводит к изменению. Эффект подобен двум изображениям, нанесенным на прозрачную пленку.
screen¶
Конечный цвет является результатом инверсии цветов, их умножения и инвертирования этого значения. Черный слой не приводит к изменению, а белый слой приводит к белому окончательному слою. Эффект подобен двум изображениям, сияющим на экране проекции.
overlay¶
Конечный цвет — результат multiply , если нижний цвет темнее или screen , если нижний цвет светлее. Этот режим смешивания эквивалентен hard-light , но со слоем обмена.
darken¶
Конечный цвет состоит из самых темных значений каждого цветового канала.
lighten¶
Конечный цвет состоит из самых светлых значений каждого цветового канала.
color-dodge¶
Конечный цвет — результат деления нижнего цвета на обратный верхний цвет. Черный передний план не приводит к изменению. Передний план с обратным цветом фона приводит к полностью освещенному цвету.
Этот режим смешивания похож на screen , но передняя часть должна быть только такой же cdtnkjq, как обратная сторона фона, чтобы создать полностью освещенный цвет.
color-burn¶
Конечный цвет является результатом инвертирования нижнего цвета, деления значения на верхний цвет и инвертирования этого значения. Белый передний план не дает никаких изменений. Передний план с обратным цветом фона приводит к черному окончательному изображению.
Этот режим смешивания аналогичен multiply , но переднего плана нужно только быть темным, как обратное к фону, чтобы сделать окончательное изображение черным.
hard-light¶
Конечный цвет — результат multiply , если верхний цвет темнее или screen , если верхний цвет светлее. Этот режим смешивания эквивалентен overlay , но со слоем обмена. Эффект подобен сиянию сурового прожектора на заднем плане.
soft-light¶
Конечный цвет похож на hard-light , но мягче. Этот режим смешивания ведет себя аналогично hard-light . Эффект подобен сиянию рассеянного прожектора на заднем плане.
difference¶
Конечный цвет — результат вычитания более темного из двух цветов из более светлого. Черный слой не действует, а белый слой инвертирует цвет другого слоя.
exclusion¶
Конечный цвет похож на difference , но с меньшим контрастом. Как и difference , черный слой не действует, а белый слой инвертирует цвет другого слоя.
Конечный цвет имеет оттенок верхнего цвета, используя насыщенность и светимость нижнего цвета.
saturation¶
Конечный цвет имеет насыщенность верхнего цвета, используя оттенок и светимость нижнего цвета. Чистый серый фон, без насыщения, не будет иметь никакого эффекта.
color¶
Конечный цвет имеет оттенок и насыщенность верхнего цвета, при этом используется яркость нижнего цвета. Эффект сохраняет уровни серого и может использоваться для раскрашивания переднего плана.
luminosity¶
Конечный цвет имеет яркость верхнего цвета, используя оттенок и насыщенность нижнего цвета. Этот режим смешивания эквивалентен color , но при этом слои меняются местами.
Как наложить изображение с цветом в CSS?
Я хочу, наложение цвета на этот элемент. Как я могу сделать это с помощью CSS?
HTML-код
в CSS
6 ответов
вы должны использовать rgba для наложения вашего элемента с фотографиями.rgba-это способ объявить цвет в CSS, который включает поддержку Альфа-прозрачности. вы можете использовать .row как overlayer такой:
что-то вроде этого. Просто добавьте overlay класс к заголовку, очевидно.
используйте mutple backgorund для элемента и используйте линейный градиент в качестве цветового наложения, объявив как начальный, так и конечный цвет-остановки как одно и то же значение.
обратите внимание, что слои в объявлении multi-background читаются так же, как они отображаются сверху вниз, поэтому сначала поместите наложение, а затем изображение bg:
Если вы не возражаете использовать абсолютное позиционирование, вы можете расположить фоновое изображение, а затем добавить наложение с помощью непрозрачности.
Наложить цвет на картинку HTML
а как сделать, что еще и цвет был поверх нее? чтобы именно целиком перекрывало?
blockquote img
blockquote blockquote img
blockquote blockquote blockquote img
blockquote blockquote blockquote blockquote img
Похожие публикации:
- Как поменять цвет ссылок в css
- Как посмотреть css чужого сайта
- Как поставить картинку на картинку в css
- Как правильно будет записано предоставленное выражение на языке pascal
Прозрачный текст на CSS
Свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента с нижними слоями.
Его значение multiply — это результат умножения верхнего и нижнего цветов. Черный слой остается черным, а белый не приводит к изменению. Благодаря этому можно сделать прозрачный цвет текста с темным фоном.
Как сделать в одном header два фоновых цвета
https://prnt.sc/qhj0vb Как сделать в одном header два фоновых цвета. То-есть в первом блоке золотой цвет мы его ставим с помощью класс .header , а во втором блоке черный фоновый цвет и когда, я его ставлю в класс .header-menu он принимает значение класса .container и его ширина становится 1100px(container).
Как сделать что бы второй фон был во всю ширину?
//первый блок с золотым цветом РУС ENG FR 8 (800) 123-45-67 [email protected] Второй блок с черным цветом
Отслеживать
109k 23 23 золотых знака 112 112 серебряных знаков 374 374 бронзовых знака