Изменение прозрачности фона кажется простой задачей. В 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 — полная непрозрачность. Можно регулировать отображение с очень высокой точностью. Правда, на глаз разница заметна только при значительном изменении.
КАК ИЗМЕНИТЬ ТЕМУ В ВК НА КОМПЬЮТЕРЕ/НОУТБУКЕ? GET STYLES | VK STYLES
Сейчас результат выглядит так:
Выставили непрозрачность, выглядит нормально. Но в дизайне явно указано, что картинка должна быть полупрозрачной. Попробуем изменить значение 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’);
Как установить расширение на любой браузер… Обзор/Настройка Vk styles…
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 всё-таки пригодилось. Правда, использовать его «в лоб» для изменения прозрачности не получится. Выход простой — добавить псевдоэлемент, который решит проблему с наследованием.
Источник: timeweb.cloud
Прозрачный фон на css: background
Вы можете часто увидеть на сайтах прозрачный фон, к примеру есть красный фон страницы, а за фоном стоит простая картинка. Так вот в CSS есть замечательные способы создания прозрачности, рассмотрим основные.
1. Через свойство opacity
Способ не совсем правильный, но он будет отображаться во всех браузерах корректно.
Рассмотрим на примере двух блоков, у одного фон картинка, а у другого фон красный и с прозрачностью.
div < width: 300px; height: 300px; position: absolute; top: 0px; left: 0px; >#block1 < backgroun-image(‘image/image1.jpg’); >#block2 < backround-color: red; opacity: 0.7; // прозрачность >
Прозрачность измеряется в от 0 до 1. Естественно ноль — это полная прозрачность.
2. background-color: RGBA
Здесь тоже самое, только в одном свойстве мы указываем и цвет, и прозрачность.
background-color: rgba(0, 125, 215, 0.7);
Это современный подход, более простой, но не всех браузер отображается корректно.
Источник: daruse.ru
Сделать прозрачным только фон
И получается, что он становится полупрозрачный, но и вместе с этим все, что находится в этом стиле, становится тоже полупрозрачным!
Отслеживать
67.6k 207 207 золотых знаков 76 76 серебряных знаков 218 218 бронзовых знаков
задан 5 окт 2015 в 16:20
2,452 3 3 золотых знака 30 30 серебряных знаков 78 78 бронзовых знаков
а использовать background: rgba — ?
5 окт 2015 в 16:33
5 окт 2015 в 16:34
5 окт 2015 в 16:39
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Добавить ещё один div. И изменить его z-index, чтобы держался, как фон.
.wrapper < position: relative; z-index: 1; padding: 1px; margin-left: 40px; margin-right: 40px; margin-top: 20px; border-radius: 6px; >.bg < position: absolute; z-index: -1; width: 100%; height: 100%; background: url(«http://placekitten.com/g/800/600») center; opacity: .4; >
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Источник: ru.stackoverflow.com