Css image gradient background: How to add a gradient overlay to a background image using just CSS and HTML — Web dev etc — Вебджем.рф

Содержание

Css трюк: добавьте цвет и линейный градиент к фоновому изображению | от MINI【xiaominzhu➿】 | Geek Culture

— CSS-трюк, который может сэкономить ваше время 🦋

Знание — факел мудрости — 知识是智慧的火炬

Реализация отзывчивого background-image очень проста, но комбинируя его с background-color, дополнительно и линейно-градиентный не так прост, как представлялось, а если еще и фоновое изображение сделать светлым и прозрачный , а также с каким-то текстом на нем, который не должен быть прозрачным…

Да, звучит громоздко 🙈, но это задача, с которой я столкнулся в своем текущем проекте, позвольте мне сначала объяснить цель с картинками.

У нас есть два разных изображения (здесь я использую примеры изображений), которые должны отображаться в соответствии с размером экрана: версия для мобильных устройств и версия для настольных компьютеров : 👇

это должно быть фоновое изображение для настольных компьютеров мобильный телефон фоновое изображение
Для компонента я создал пример кода ниже:
адаптивные изображения на настольных и мобильных устройствах
Моя цель — использовать свойство css « display » , чтобы подтвердить, какое изображение отображается на каком устройстве в соответствии с экраном размеры.

✂️ Реализовать их просто, но тут возникает требование , окончательный эффект должен выглядеть следующим образом:0005 linear-gradient, some дополнительные цветов фона, some text position, some image opacity rules …

Давайте начнем с первого изображения (версия для рабочего стола) 🌸

Сначала создадим CSS для рабочего стола обертка изображения, я назвал ее « heroImageWrapper », см. пример снимка экрана ниже: 👇 (нажмите на снимок экрана, чтобы просмотреть его полностью)

определить высоту и ширину очень важно

С помощью CSS « display », мы могли бы определить, что это изображение должно отображаться только на экране с размером больше 481px как « desktop » version
Дайте оболочке положение « относительно », чтобы мы могли расположить текст Внутри позже
Определите линейно-градиент с 90DEG (T HE Значения 0DEG , 18000DEG 180DEG 180DEG 180DEG 180DEG . 0063 , 270deg , and 90deg , are equivalent to to top , to bottom , влево и вправо соответственно ) и непрозрачность: 0.6 влево072
… добавить границу, радиус границы …

🌱 Теперь начинается самое интересное, как мы видим из финального эффекта, должны быть дополнительные цвета, непрозрачность …, до сих пор мы реализовали только линейный градиент и какой-то непрозрачность, но картинка должна быть темнее и более размытой, как можно добавить еще один цвет к перекрывающему все изображение?

Возможно, мы можем представить что-то вроде наложения между изображением и текстом. В любом случае нам нужна техника CSS, чтобы ввести такое покрытие. 🍁

Изначально CSS предоставляет мощные элементы ::before, ::after для добавления на страницу стилистического содержимого, которое не должно влиять на разметку.

В этом случае моим решением было использовать « до », чтобы добавить содержимое « псевдо », которое на самом деле является просто «заполнителем» без какого-либо содержимого, кроме дополнительного цвета фона #beddf2 .

👉 Важное примечание: для всех псевдоэлементов требуется содержимое Свойство CSS для отображения. В нашем случае это будет просто пустая строка.

::before выше вставляет динамический элемент перед выбранным элементом, в моем случае heroImageWrapper .

Последний шаг, дайте текстовому содержимому position:absolute для разных размеров экрана до 481px, 768px …, вы можете определить больше правил CSS, но здесь я просто делаю это просто👇

 разные позиции с разным размером экрана … 👐 Это была картинка для рабочего стола!
 Теперь давайте продолжим со вторым изображением (мобильным) 🌸
 После настольной версии это должно быть довольно просто, единственные изменения - это внешний вид   на размере экрана (меньше 481 пикселей), линейный градиент  направление  ( это время с  360deg , что немного размывает дно), и цвет «наложения», непрозрачность…
 определяют положение текста Я уверен, что есть лучший способ добиться этих эффектов на фоновых изображениях, но я думаю, что по крайней мере эти два примера интересны, надеюсь, вам понравится!
 Спасибо за прочтение! 👐
 Фоновое изображение и свойства градиента 
 Установите фоновое изображение и фоновый градиент элемента.
 К одному и тому же элементу можно применить несколько фоновых изображений и градиентов. Они накладываются друг на друга для создания композита.
 Тип 
 Выберите, использовать ли изображение или градиент.
 Параметры и поведение: 
  Изображение (по умолчанию)   — Установить фон как изображение
  Градиент   – Установить фон как градиент
  Нет  - Установить фон на "Нет"
 Изображение 
 Отображается, если в поле Тип выбрано изображение.
 Установите фоновое изображение (или несколько фоновых изображений) для элемента.
 Приложение и опции: 
 Нажмите на миниатюру    , чтобы выбрать изображение
 Для нескольких изображений или градиентов или их комбинации нажмите   Добавить изображение или градиент   чтобы добавить другое изображение
 Несколько изображений можно  перетаскивать   вверх и вниз, чтобы изменить порядок их размещения
 Дополнительную информацию о фоновом изображении см. на странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
 Стиль изображения Drupal 
 Установите стиль изображения Drupal для применения к фону изображение.
 Размер 
 Установите размер фонового изображения элемента.
 Опции и поведение: 
  Авто   – установить для фона исходный размер
   Содержит   – Максимально масштабируйте изображение, не обрезая его
  Обложка   — Максимально масштабируйте изображение, чтобы в элементе не было пустого места. Изображение будет обрезано при необходимости
  Числовой   — масштабирование изображения до указанных значений ширины и высоты. Ширина — укажите ширину в пикселях или автоматически
 Высота — укажите ширину в пикселях или автоматически
 Дополнительная информация: 
 Дополнительную информацию о размере фонового изображения см. на https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
 Повторить 
 Укажите, как будет повторяться фоновое изображение. (или плитка).
 Параметры и поведение: 
  Без повтора   – Установить фон таким образом, чтобы он не повторялся
  Повторить   — Установить фон для повторения по вертикали и горизонтали
  Повтор по горизонтали   - Установить повторение фона по горизонтали
  Повторить по вертикали   — Установить фоновое изображение для повторения по вертикали
 Дополнительную информацию см. на https://developer.mozilla.org/en-US/docs/Web/CSS/background-repeat
   Вложение 
 Установите фиксированное фоновое изображение или прокрутите его в окне просмотра браузера.
 Параметры и поведение: 
  прокрутка   — установить фон для прокрутки с элементом
  исправлено  - Исправить фон в окне просмотра
  локальный   – установить фон для прокрутки содержимого элемента, если у элемента есть механизм прокрутки
  Примечание:   Фоновое вложение не будет работать на iOS и некоторых других мобильных устройствах.
 Дополнительную информацию см. на https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
 X-position 
 Установка горизонтального положения фонового изображения.
 Параметры и поведение: 
  слева   — установить фоновое изображение так, чтобы оно начиналось с левого края изображения
  center   – установите фоновое изображение так, чтобы оно начиналось с горизонтального центра изображения
 .  справа   – установите фоновое изображение так, чтобы оно начиналось с правого края изображения
.
  Примечание:   Используйте со смещением x для точного позиционирования изображения.
 Дополнительную информацию можно найти на странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x 9.0003
 Смещение по оси X 
 Установите горизонтальное смещение фонового изображения.
 Поведение: 
 Положительные числа смещают изображение от левого или правого края в зависимости от значения, установленного в позиции x
 Пример. Если позиция x установлена вправо, а смещение x равно 100 пикселям, изображение сдвинется на 100 пикселей влево
 Ожидаемое значение: 
 Введите число
 Отрицательные значения принимаются
 Допустимые единицы: 
 Можно оставить поле пустым или указать единицу измерения.
    пусто   — Просто добавьте число, и значение будет интерпретировано как пиксели и автоматически преобразовано в rem, если это поведение установлено в настройках базовых единиц
  пикселей   – значение будет применено в
 пикселях.  %   — значение будет применяться в процентах от ширины родительского элемента
  Примечание.  Дополнительные единицы принимаются. Для получения дополнительной информации см. https://www.w3schools.com/cssref/css_units.asp
 Дополнительную информацию можно найти на странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-x
 Y-position 
 Установка вертикального положения фонового изображения.
 Параметры и поведение: 
  верх   — установить фоновое изображение так, чтобы оно начиналось с верхнего края изображения
  center   – установите фоновое изображение так, чтобы оно начиналось с вертикального центра изображения
.   нижний   - Установите фоновое изображение, чтобы оно начиналось с нижнего края изображения
 Дополнительную информацию см. на странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y
 Смещение по оси Y 
 Установите вертикальное смещение фонового изображения.
 Поведение: 
 Положительные числа смещают изображение от верхнего или нижнего края в зависимости от значения, установленного для позиции y
  Пример:   Если позиция по оси Y установлена внизу, а смещение по оси Y равно 100 пикселям, изображение переместится на 100 пикселей вверх
.
 Ожидаемое значение: 
 Введите номер
 Отрицательные значения принимаются
 Принятые единицы: 
 Вы можете оставить поле пустым или указать используемую единицу.
  пусто   — Просто добавьте число, и значение будет интерпретировано как пиксели и автоматически преобразовано в rem, если это поведение установлено в настройках базовых единиц
    пикселей   – значение будет применено в
 пикселях.  %   — значение будет применяться в процентах от ширины родительского элемента
  Примечание.  Дополнительные единицы принимаются. Дополнительную информацию см. на странице https://www.w3schools.com/cssref/css_units.asp
. Дополнительную информацию см. на странице https://developer.mozilla.org/en-US/docs/Web/CSS/background-position-y.
 Градиент 
 Отображается, если в поле Тип выбран градиент.
 Установить фоновый градиент элемента.
 Ожидаемое значение: 
 Выберите градиент в палитре градиентов
 К фону можно применить несколько градиентов для создания различных эффектов. Если вы хотите использовать несколько изображений или градиентов или сочетание того и другого, нажмите 9.