Поиск по сайту:

Как изменить непрозрачность фонового изображения CSS


Введение

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

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

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

Предпосылки

Если вы хотите следовать этой статье, вам понадобятся:

  • Знакомство с непрозрачностью.
  • Знакомство с position: relative и position: absolute.
  • Знакомство с контекстом стека и z-index
  • Знакомство с псевдоэлементами :before и :after.

Способ 1 — Использование отдельного элемента изображения и позиционирования

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

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

<div class="demo-wrap">
  <img
    class="demo-bg"
    src="https://assets.linux-console.net/labs/images/community_bg.png"
    alt=""
  >
  <div class="demo-content">
    <h1>Hello World!</h1>
  </div>
</div>

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

.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;
}

Эта разметка и стили дадут результат с текстом поверх изображения:

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

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

Способ 2 — Использование псевдоэлементов CSS

Второй подход будет опираться на псевдоэлементы. Псевдоэлементы :before и :after доступны для большинства элементов. Как правило, вы указываете значение 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://assets.linux-console.net/labs/images/community_bg.png');
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.demo-content {
  position: relative;
}

Эта разметка и стили дадут результат с текстом поверх изображения:

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

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

Заключение

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

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