Как сделать прозрачный фон на css

Изменение прозрачности фона кажется простой задачей. В CSS есть свойство opacity, которое управляет прозрачностью. Но этот подход работает не всегда. Если нужно разместить, например, текст поверх картинки, то использовать opacity — не лучшее решение.

Давайте разбираться, в чем проблема с вроде бы подходящим свойством CSS и как изменить прозрачность фона картинки , чтобы не испортить внешний вид других частей интерфейса.

Наивный подход — использовать opacity

К вам приходит проджект-менеджер и показывает новый дизайн страницы облачные серверы . В нем есть такие облака. Задача — сделать их полупрозрачными, а сверху добавить текст.

Первая мысль — сделать прозрачный фон CSS с помощью opacity. Выглядит так, будто это оптимальное решение для поставленной задачи. Набросаем простую разметку и посмотрим, что из этого получится.

HTML:
 
Timeweb Cloud


CSS: 
.cloud background-image: url(../images/cloud.png'); 
opacity: 1;
>

Свойство opacity принимает значение от 0 до 1, где 0 — полная прозрачность, а 1 — полная непрозрачность. Можно регулировать отображение с очень высокой точностью. Правда, на глаз разница заметна только при значительном изменении.

Сейчас результат выглядит так:

Выставили непрозрачность, выглядит нормально. Но в дизайне явно указано, что картинка должна быть полупрозрачной. Попробуем изменить значение opacity — например, 0.5 вместо 1. Облака должны стать немного светлее, насыщенность цветов ведь тоже изменится.

Вылезла проблема — вместе с фоновой картинкой начал исчезать текст с названием сервиса cloud.timeweb.com . В дизайне страницы такого нет. Более того, если сделать opacity: 0, то текст вообще исчезнет, как и облака под ним. Значит, это решение не подходит. Осталось разобраться, в чём причина такого поведения.

Объяснение простое. Проблема в том, что непрозрачность автоматически наследуется дочерними элементами. Нет свойства CSS, которое можно использовать для изменения непрозрачности только фонового изображения родителя. Возможно, оно появится когда-нибудь в будущем. Пока же нужны небольшие «костыли».

Мы поняли, что такое применение opacity для решения задачи не подходит. Для изменения прозрачности фонового изображения потребуется другой подход.

Гибкий подход — использовать псевдоэлемент

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

Разметка останется такой же, а стили перепишем:

.cloud position: relative; 
height: 100vh; 
width: 100%; 
display: flex; 
align-items: center; 
justify-content: center;
>

.cloud::before < 
content: ""; 
background-image: url('../images/cloud.png'); 
background-size: cover; 
position: absolute; 
top: 0px; 
right: 0px; 
bottom: 0px; 
left: 0px; 
opacity: 0.3;
>

.title position: relative; 
top: 80px; 
right: 50px;
>

Элемент .cloud получил свойство position: relative. Это нужно для того, чтобы относительно родителя позиционировать потомков — .cloud::before и .title. Потомки выстраиваются внутри родители с помощью флекса.

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

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

Посмотрим на результат. Теперь облака полупрозрачные, а текст — непрозрачный, как того и требует дизайн страницы.

Вместо .cloud::before можно добавить обычный HTML-элемент для фонового изображения CSS — например, ещё один div. Принципиально это ничего не изменит. Но использование псевдоэлементов помогает упростить структуру HTML и не плодить в разметке лишние сущности.

А в чём же гибкость этого подхода?

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

Свойства background-image и background-size перенесём в стили .cloud. В стили .cloud::before добавим background-color: rgba(0,0,0,0.25). Должно получиться так:

.cloud position: relative; 
height: 100vh; 
width: 100%; 
display: flex; 
align-items: center; 
justify-content: center; 
background-image: url('../images/cloud.png'); 
background-size: cover;
>

.cloud::before < 
content: ""; 
position: absolute; 
top: 0px; 
right: 0px; 
bottom: 0px; 
left: 0px; 
background-color: rgba(256,256,256,0.75)
>

RGBA — это три основных цвета (Red, Green, Blue) плюс альфа-канал, который помогает управлять прозрачностью. Значение rgba(256,256,256,0.75) говорит о том, что мы наложили белую плашку с непрозрачностью 25%. Вместо белого можно применить любой другой цвет и получить интересный эффект наложения:

Какой способ выбрать — решайте сами. Если с цветами играть не придётся, то можно обойтись первым вариантом. Хотя кто знает, что в следующий раз придёт от дизайнера.

Заключение

Как мы увидели, свойство opacity всё-таки пригодилось. Правда, использовать его «в лоб» для изменения прозрачности не получится. Выход простой — добавить псевдоэлемент, который решит проблему с наследованием.

Источник

Полупрозрачный фон

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

Свойство opacity

Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными и увеличить уровень прозрачности, добавляя opacity: 1 , не получится. В табл. 1 показан вид текста и фона с разными значениями opacity .

Табл. 1. Вид блока в зависимости от значения opacity

0.1	0.4	0.8	1

В примере 1 показано создание полупрозрачного блока с использованием opacity .

Пример 1. Фон на веб-странице

HTML5 CSS3 IE 9+ Cr Op Sa Fx

       
Гоббс одним из первых осветил эту проблему с позиций психологии.
  

RGBA

Обычно по дизайну полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba , затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1 (рис. 1), при этом 0 означает полную прозрачность, а 1 непрозрачность цвета..

Рис. 1. Синтаксис применения rgba

В примере 2 показано применение формата RGBA для создания полупрозрачного фона.

Пример 2. Полупрозрачный фон

HTML5 CSS3 IE 9+ Cr Op Sa Fx

       
Гоббс одним из первых осветил эту проблему с позиций психологии.
  

Результат данного примера показан на рис. 2. Значение непрозрачности для фона установлено 90%.

Рис. 2. Полупрозрачный фон и непрозрачный текст

Источник

Способы создания прозрачных фонов

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

Как задать прозрачность?

Если рассматривать данную тему сквозь призму исторического развития веб-технологий, то можно выделить следующие подходы:

• Свойство opacity.
• Использование PNG -картинки
• Формат системы RGBA
• Ну, и наконец, древность или клетчатые изображения.

CSS свойство Opacity

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

DOCTYPE html> html> head> title>TODO supply a titletitle> meta charset="UTF-8"> link rel="stylesheet" media="all" type="text/css" href="css/style2.css" /> head> body> div class=" prozrachen "> Тут будет много Вашего текста div> body> html>

body  background: url(./vaden-pro-logo.png); /* Фон для тела страницы */ > . prozrachen  padding: 10px; /*Отступы для текста*/ background: darkturquoise; /* Задаем цвет фона */ margin: 0 auto; /* Центрируем блок */ width: 50%; /* Задаем ширину блока */ opacity: 0.7; /* Задаем прозрачность */ font: 48px/64px Times New Roman; text-align: justify; >

В результате мы получили полупрозрачный блок:

1. Opacity принимает значения из диапазона: 0 (полная прозрачность) — 1 (непрозрачность).
2. Кросс-браузерность. В IE до седьмой версии включительно Opacity не поддерживается. Добиться одинакового отображения элемента поможет следующая строчка:

• с абсолютным позиционированием (position: absolute)
• с фиксированным линейным размером (height или width).

Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет

и рассмотрим его под микроскопом:

Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.

Использование PNG -картинки

Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.

1. Создаем в Photoshop, однотонную полупрозрачную картинку (назовем ее transparent) и сохраняем в формате png.
2. Используем ее в качестве бэкграунда:

body  background: url(./vaden-pro-logo.png); > .prozrachen  padding: 10px; background: url(./transparent.png); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white;li> text-align: justify; >

В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:

1. В отличии от свойства opacity прозрачность задается только для фона
2. Кросс-браузерность. Работает почти во всех браузерах, и это плюс. Но прозрачность PNG не поддерживается в IE6. Если вы оптимизируете свой сайт под такую древность — придется применять другие методы или скрипты.
3. При отключении отображения картинок, ваш фон пропадет (учтите этот момент при оптимизации отображения на мобильных устройствах, ведь безлимитный интернет не всегда есть под рукою).
4. Для изменения цвета и/или степени прозрачности вам нужно создать новую картинку и перезалить ее на серв.

Формат системы RGBA

Одним из самых современных методов изменения транспарантности фона является применение системы RGBA.

RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha-канала, характеризующего степень прозрачности.

В уже известном нам примере, заменим содержимое в CSS файле на следующее:

body  background: url(./vaden-pro-logo.png); /* Фоновый рисунок */ > .prozrachen  padding: 10px; background: rgba(0, 206, 209, 0.7); margin: 0 auto; width: 50%; font: 48px/64px Times New Roman; color: white; text-align: justify; >

1. В отличии от свойства opacity прозрачность задается только фону
2. В отличии от метода PNG картинки, для изменения цвета или степени транспарентности нам нужно просто поменять значения rgba.
3. Кросс-браузерность. Работает во всех современных браузерах (начиная с IE9, Op10, Fx3,Sf3.2).Для более старых браузеров придется либо пожертвовать прозрачностью, либо применять opacity, png методы.

Клетчатые изображения, или с уважением к истории

Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.

В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.

1. При просмотре текста на таком фоне могут быстро уставать глаза (особенно давит рябь при прокрутке).
2. В остальном особенности применения аналогичны с методом «PNG -картинки».

Подытожим?

Напоследок, несколько общих рекомендаций по использованию прозрачности в своих проектах:

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

Источник