Как наложить градиент на картинку в css
Сначала давайте создадим наш элемент баннера, к которому мы применим наше фоновое изображение и наложение градиента. Мы также добавим дополнительную обертку содержимого для элементов, где находятся внутри нашего баннера, на которые мы будем ссылаться позже.
Чтобы применить наше наложение градиента, будем использовать псевдоэлемент. Мы абсолютно позиционируем оверлей, чтобы покрыть 100% ширину и высоту нашего баннера.
Второй вариант:
Так как мы применяем градиентное наложение с псевдоэлементом, у вас иногда будут проблемы с содержимым внутри баннера, отображаемым под градиентным наложением.
Здесь добавлено больше градиентов, что можно сделать одну сторону в синей палитре, а другую в зеленой, вообщем поиграть с оттенками цвета.
Как отмечено в первом комментарии, вы можете опустить псевдоэлемент и использовать несколько фонов. Это также прекрасно работает, но устраняет возможность анимации градиента при наведении, что может быть обычным делом.
Линейные градиенты
CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой. Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.
Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image .
linear-gradient
Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:
Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.
Угол или направление градиента
Направление можно задавать градусами или ключевыми словами.
В градусах: от 0 до 360, например 270deg .
Ключевыми словами:
to right = 90deg ;
to bottom = 180deg — значение по умолчанию;
to left = 270deg .
Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left .
Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:
Вот код самого первого квадрата, для примера:
Следует помнить, что to top right не то же самое, что 45deg . Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.
Разница хорошо видна на прямоугольных фигурах:
Управление положением цветов
Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.
Примеры задания значений в % , в em и значения, выходящие за границы элемента:
Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:
Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:
Полоски на фоне сайдбара — ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.
Градиент в примере задан сложным длинным кодом, потому что полоски должны располагаться только над фоном для сайдбара. Если не пытаться сделать всё фоном для одного блока, можно было бы решить задачу с помощью псевдоэлемента.
При отсутствии ограничений код может быть гораздо короче:
В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй — определяем цвета градиента и границу между ними, в третьей — задаем положение и размер получившегося изображения. Самая важная часть — размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно : )
Вся запись может быть сделана в одну строчку, но для читабельности удобнее писать в несколько, особенно для сложных градиентов.
Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:
Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.
Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0) . Про разные способы задавать цвета можно почитать здесь.
Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.
repeating-linear-gradient
Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент
К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat .
Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров, и ими можно свободно пользоваться.
Ограничения
Градиенты имеют такое же ограничение, что и box-shadow : им нельзя задавать отдельно цвета или направление. Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.
Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.
Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.
В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.
webdevetc
. . . my software engineering blog
(Typescript, Vue, Laravel, PHP, Javascript, React, Docker, etc).
How to add a gradient overlay to a background image using just CSS and HTML
July 2020: This post is archived — since I moved to Gridsome some of the formatting is messed up. This is on my todo list to update.
Adding a background image to a <div> (or any other tag) is easy using CSS. Here it is (without gradient yet — scroll down for the gradient image css):
Some overlaying text here.
I’ve put some other rules on the div to set the background image to fill the whole div (cropping if needed) with the background-size: cover . The width is 80%, so resize your browser to see how this background-size works. (It will crop the image to ensure it fits correctly).
How to add a gradient on top of a background image?
If you wanted to add a semi opaque/semi transparent colour gradient that goes on top of the background image, your first thought might be to overlay another div (or use the :after css selector).
However, the easiest way to do it is to just add another parameter to the background-image css rule.
Some overlaying text here.
Both divs are using the same background image, but the second one has a linear-gradient on it. The rgba(x,y,z,o) is the colour (first three numbers = red/green/blue. The 4th param (0.52) is the opacity — 1.0 is fully visible, 0.0 is invisible).
How to add a gradient background to a div without using images
You can also easily add a gradient background to a div (or any other HTML element) without using images, using the following CSS rules.
BTW, I’ve set the gradient to start at red and end in blue. It might not look pretty, but it is so you can click the buttons below to swap its position, and quickly work out what direction it is facing.
switch to top switch to top left switch to top right switch to left switch to right switch to bottom left switch to bottom right «`css
RELATED POSTS
Comments → How to add a gradient overlay to a background image using just CSS and HTML
About me
This is my site where I post some software engineering posts/content. Some articles are in depth, some are more like notes.
I mostly focusing on Laravel, Vue, PHP, JS, Typescript, Golang, Docker etc.