Наложить цвет поверх изображения css

Содержание

Background-blend-mode
Сайдбар
Статьи
Страницы
Проекты
Как наложить цвет на картинку css
CSS Image Overlay Two ways to create an image with a colour overlay in CSS
Why should you add an overlay to your image?
Using an image tag and a section background.
Using a linear gradient

Background-blend-mode

На этой неделе в Firefox 30 было включено по умолчанию свойство background-blend-mode . Таким образом, Firefox стал третьим браузером, поддерживающим это свойство (два других — Opera и Chrome). Safari будет поддерживать это свойство в следующей версии, про планы IE мне ничего найти не удалось.

Внимание: все демо в посте — действующие примеры без фолбеков. Для просмотра лучше всего воспользоваться последними версиями Chrome, Opera или Firefox.

Что делает это новое свойство и какие возможности оно нам дает?

background-blend-mode управляет режимами наложения слоев фона, заданного в CSS.

Наведите курсор на картинку, чтобы увидеть исходное изображение.

background-blend-mode аналогичен режимам наложения слоев в фотошопе, и список возможных значений свойства вам, скорее всего, покажется знакомым:

normal
multiply
screen
overlay
darken
lighten
color-dodge
color-burn
hard-light
soft-light
difference
exclusion
hue
saturation
color
luminosity

Возьмем, к примеру, картинку с котиком и зададим её фоном:

background: teal url(http://placekitten.com/250/200);

Для наложения слоев обязательное условие, чтобы слоев было больше одного. В нашем случае первым слоем является цвет ( teal ).

Теперь можно добавить режим наложения, например:

background: teal url(http://placekitten.com/250/200); background-blend-mode: hard-light;

Вы можете поиграться с режимами здесь или посмотреть их списком на одной странице вот тут.

Слоев фона может быть больше двух, и для каждого слоя можно отдельно задавать режим наложения:

background: teal url(http://placekitten.com/250/200); background-blend-mode: hard-light, multiply, normal;

Фоны могут содержать не только изображения, но и градиенты, что позволяет делать разные интересные эффекты:

Как можно использовать background-blend-mode ?

Предположим, есть сайт в определенной цветовой гамме, и в дизайне нужно разместить несколько картинок:

Так картинки не очень вписываются в цветовую схему. Раньше чтобы тонировать изображения под цвет сайта, потребовалось бы открыть графический редактор и проделать эту операцию с каждой картинкой, но сейчас это можно сделать одной строчкой:

background-blend-mode: luminosity;

Способ имеет свои преимущества:

Экономит время — не нужно вручную красить картинки, используемые в дизайне. Особо пригодятся режимы наложения в прототипировании, когда картинки, скорее всего, ещё будут меняться.
Позволяет легко сделать эффект, когда при наведении картинка показывается в оригинальном цвете. При этом не нужно готовить два изображения и менять их по наведению курсора — достаточно одного.

А если потом изменится цветовая схема сайта — не нужно будет заново перекрашивать картинки под новую схему — всё произойдет само собой:

Правда, мне не удалось сделать плавную смену режимов наложения. Насколько я понимаю, они не анимируются. Но это можно обойти используя псевдоэлементы: через :before создается дублирующий слой с той же картинкой, и ему по наведению меняется прозрачность — это можно сделать плавно (пример справа):

Ещё один способ покрасить картинку в дизайне — подложить полосатый градиент:

Приятный бонус background-blend-mode — плавная деградация: если браузер не поддерживает режимы наложения, посетитель увидит обычную картинку. Может быть, она будет не очень вписана в цветовую схему, но это лучше чем ничего.

Интересно, что в некоторых режимах результат различается в зависимости от того, наложена ли картинка на цвет или цвет поверх картинки (слева картинка поверх цвета, справа наоборот):

Наложение цвета на картинку позволяет получить более интересные результаты, похожие на цветовые фильтры, но этот вариант хуже с точки зрения деградации, потому что если режимы не сработают, на странице отобразится верхний слой — то есть заливка цветом.

С изображениями всё более-менее понятно, но вот для CSS-градиентов режимы наложения поистине открывают новые горизонты. Теперь слои градиентов могут не просто просвечивать друг под другом в областях полной или частичной прозрачности, но также они могут взаимодействовать с нижележащими слоями, образовуя новые сочетания. Делать такие градиенты безусловно сложнее, но и интереснее тоже.

Уже есть первая галерея с примерами: bennettfeely.com/gradients/. Ниже на странице можно найти JS-фолбек и взвешивание одних и тех же градиентов, сделанных на CSS или в виде изображений различных форматов. CSS, конечно, выигрывает.

И даже если пока что не все браузеры позволяют использовать background-blend-mode , имеет смысл поинтересоваться какие из используемых вами изображений уже можно заменить CSS-паттернами, чтобы получить выигрыш в весе и производительности.

Вдохновившись примерами из галереи, я решила посмотреть что ещё можно сделать. Одно из забавных открытий — шахматная доска:

Без режимов наложения такое клеточки делать немного головоломно (хотя на основе такого градиента можно получить множество других). С режимами клеточки делаются всего из двух градиентов, третий понадобится в случае если клеточки должны быть не черно-белыми, а цветными.

Правда, паттерн не всегда хорошо поддаётся перекрашиванию, это некоторый недостаток способа. С другой стороны, в этом случае заливкой клеток может быть не только цвет, но и градиент, что в предыдущем способе было бы не очень удобно делать.

Можете отредактировать любой из них отключив режимы наложения и посмотреть что меняется (а также увидеть как выглядят паттерны в бразуерах без поддержки свойства), можете попробовать менять режимы местами, вписывать свои значения или менять цвет фона. Иногда в процессе таких экспериментов из одного паттерна получается ещё несколько.

background-blend-mode выглядит очень привлекательно, позволяя добавить немного магии фотошопа в привычный CSS.

Сайдбар

Статьи

Математические функции в CSS
Адаптивное видео с помощью встроенных математических функций CSS
Недоступность в картинках
Единицы размеров в CSS
Генератор цветовых тем
Jekyll → Gatsby
Вариативные шрифты
Размеры в SVG
Адаптивный Pixel Perfect
Логотип не отвечает или временно недоступен
SVG-паттерны
Мыльные пузыри на SVG
SVG-градиенты
Весёлая консолька
SVG-маски
Умная прокрутка со Scroll Snap Points
CSS-анимации для ротации изображений
Анимированные SVG-маски
Странности обводки в SVG
SVG-прелоадеры
Анимируем градиенты ещё раз
Background-blend-mode
Возможности оформления SVG
CSS и SVG маски
Nth-child и nth-of-type
SVG-иконки
SVG: заливка и обводка
SVG-path
SVG: группировка и переиспользование элементов
SVG-фигуры и трансформации
SVG
СSS-градиенты и 3D
Рисовалка анимированных теней
Свежие CSS-паттерны
CSS-паттерны
Радиальные градиенты
Линейные градиенты
Крестики-нолики на CSS
Border-image
Электронные часы на CSS и JS.
Сколько весят селекторы?
Символы юникода
Свойство content
Анимируем CSS-градиенты
Текстовые эффекты
Древовидный список на CSS
Css-селекторы, часть 2
Css-селекторы
Контекст наложения
Два способа «прошить» элемент по краю
Box-sizing
Цвета в CSS
Фон под строчками: добавляем поля
Box-shadow
Css-фигуры: лепесток
Transform
Css Animation
3D-куб
Border-radius
First letter
Эти глаза напротив
CSS-фигуры
Стрелки с помощью свойства border
Flexbox

Страницы

Проекты

Источник

Как наложить цвет на картинку css

Чтобы наложить цвет на картинку с помощью CSS, вы можете использовать свойство background-color для элемента, содержащего изображение. Это свойство устанавливает цвет фона элемента и может быть применено к любому элементу, в том числе к элементу, содержащему изображение.

Например, если у вас есть элемент с классом image-container , содержащий изображение, и вы хотите сделать полупрозрачный зеленый фон, вы можете использовать следующий CSS-код:

.image-container  background-color: rgba(0, 255, 0, 0.5); >

Здесь мы устанавливаем цвет фона элемента с помощью свойства background-color . Функция rgba используется для установки цвета в формате «красный, зеленый, синий, прозрачность», где значения красного, зеленого и синего цветов находятся в диапазоне от 0 до 255, а прозрачность — от 0 до 1. Значение прозрачности 0.5 устанавливает полупрозрачный цвет.

Если вы хотите, чтобы цвет находился над изображением, а не под ним, вы можете использовать свойство background-blend-mode , которое определяет как фоновое изображение элемента будет смешиваться с его фоновым цветом:

.image-container  background-color: rgba(0, 255, 0, 0.5); background-blend-mode: overlay; >

Здесь мы используем свойство background-blend-mode с значением overlay , таким образом фоновый цвет смешивается с фоновым изображением, чтобы отразить яркость или темноту фона.

Источник

CSS Image Overlay Two ways to create an image with a colour overlay in CSS

Using an image with a dark overlay is one of the quickest ways to make a beautiful hero header for a blog, landing page or portfolio. It’s a trick I use constantly.

Why should you add an overlay to your image?

An overlay on an image not only improves aesthetics but it makes text much more readable. Consider this hero header I’ve mocked up. It’s not great, is it? The text here is readable. But only just, and it’s because I’ve used H1 and H2 headers. Yet, it’s not very accessible for people with reduced vision, and it’s also really busy to look at. Overlays vastly improve readability, along with making your design much more sleek. In this post, I’ll be showing you a couple of ways to code them up. There are, of course, many ways you can get to your end goal here. These are the two methods I find easiest to remember. Which method you choose will depends on the purpose of the image. If you’re only after a pretty background, you can go about this any way you like. Alternatively, if your image isn’t just decorative and you want people to notice it, you should use an image tag with an alt description for accessibility.

Using an image tag and a section background.

Again, this is your best option if your image isn’t just decorative. This might not be in a header; it might be in an image aside or as part of an article. First, place an img tag in a section.

   Ellen Macpherson
 Just another tech blog.

I’ve purposely avoided a div here. If you’re creating a header, make sure you’re using semantic HTML to define it as such. This will help with both accessibility and SEO considerations. For more on why you should use semantic HTML elements, see this helpful blog post. Now for the CSS. Make sure the image fills the header, either by using height: 100%, width: 100%, or by using object-fit: cover. Set the background to your desired colour. In this case, i’ve just kept it black, but you could also make clever use of a linear gradient to really make things pop (see the next section for details). Set the opacity of the image somewhere between 0.3 — 0.5.

And viola! You’ve got a much nicer looking background that draws the eye immediately to the text and call-to-action button. Pros: Allows you to set alt text for the image. Browser-friendly. Cons: Involves more HTML and styling than other methods.

Using a linear gradient

This is my preferred method. There’s less styling and thinking involved around the layout. Often, you won’t be using these images for descriptive purposes, so it seems more intuitive to handle the background in CSS. In this case, you don’t need to reference the image in the HTML at all, so the code only involves the header (or whichever tag you want to style) and any text or buttons on top:

  Ellen Macpherson
 Just another tech blog.

Remember, you can’t set alt tags without HTML, so make sure the image you’re using is purely decorative. Although CSS linear gradients is well-supported now, I’m going to use a fallback colour along with the webkit prefix to make sure I cover all browser possibilities. This also gives you a fallback if, for any reason, the background image is slow to load. Remember the C in CSS; everything cascades. Therefore, your foolproof fallback colour and alternative webkit prefixed styles should always come before the least-supported solution. In this case, that’s linear-gradient().

Here we are with a more colourful interpretation of an overlay: In this example, I’ve used the RGBA colour format to make the gradient transparent and set the opacity to 0.8 for a bold finish. However, colour gradients will never look the same on different images. Play around with the opacity to make sure it works well with your design. For more impact, make the image underneath grayscale and alter its contrast. Pros: Uses fewer lines of code. Easier to implement. Cons: Issues around browser support mean you’ll have to remember to set a fallback image or colour for your background. That’s it! If you have any other great ways to implement an overlay, let me know in the comments. Let me know your favourite gradients, too 👇

Источник