Прозрачность фонового изображения в CSS

20 ноября, 2021 12:06 пп 1 691 views | Комментариев нет

| | Комментировать запись

opacity – это свойство CSS, которое позволяет настраивать прозрачность элемента. По умолчанию для всех элементов оно имеет значение 1. Приближая это значение к 0, вы можете сделать элемент более прозрачным.

Обычный вариант применения свойства opacity – использование изображения как части фона. Регулировка прозрачности может улучшить читаемость текста или поможет добиться желаемого визуального эффекта. Однако имейте в виду: невозможно менять opacity элемента background-image, не затрагивая при этом его дочерние элементы.

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

Требования

Чтобы следовать этой статье, вам понадобятся навыки работы с такими вещами:

Метод 1: Изображения и абсолютное позиционирование

Первый подход будет основан на двух элементах (как можно понять из названия). Один из них – «обертка», которая обеспечивает точку отсчета с помощью position: relative. Второй – это элемент img, который появляется за контентом с помощью position: absolute и контекста наложения.

Разметка, написанная с применением этого подхода, может выглядеть так:

<div class="demo-wrap">
  <img
    class="demo-bg"
    src="https://your-image"
    alt=""
  >
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

Соответствующие CSS-стили будут выглядеть так:

.demo-wrap {
  overflow: hidden;
  position: relative;
}

.demo-bg {
  opacity: 0.6;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}

.demo-content {
  position: relative;
}

В итоге текст «Hello World!» будет наложен поверх изображения.

Родительский demo-wrap <div> устанавливает блок, содержащий абсолютное позиционирование. Для demo-bg <img> установлено значение position: absolute и присвоено свойство opacity . Для demo-content <div> установлено значение position: relative. Из-за организации разметки он имеет более высокий контекст наложения, чем demo-bg. Также для более точного управления контекстом наложения можно использовать z-index.

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

Метод 2: Псевдоэлементы CSS

Второй подход основан на псевдоэлементах. Псевдоэлементы :before и :after можно использовать для большинства CSS элементов. Как правило, вы предоставляете значение content и используете его для добавления дополнительного текста в начале или в конце. Однако так вы также можете добавить пустую строку, а затем использовать псевдоэлементы для дизайна.

Вот пример разметки для этого подхода:

<div class="demo-wrap">
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

А вот – ее сопутствующие стили:

.demo-wrap {
  position: relative;
}

.demo-wrap:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
  background-image: url('https://your-image');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.demo-content {
  position: relative;
}

Эта разметка и стили выведут фразу «Hello World!» поверх изображения.

Родительский demo-wrap <div> устанавливает блок, содержащий абсолютное позиционирование. Псевдоэлементу :before присвоено position: absolute с небольшой прозрачностью. Он использует background-size: cover, чтобы занять все доступное пространство.

Преимущество этого подхода заключается в поддержке других свойств фона, таких как background-position, background-repeat и background-size. Его недостатком является использование одного из псевдоэлементов, который может конфликтовать с другими эффектами дизайна – например, с clearfix.

Заключение

В этой статье мы рассмотрели два метода обхода ограничения для непрозрачных фоновых изображений.

Читайте также: Основы оптимизации шрифтов в CSS

Tags:

Добавить комментарий