Полупрозрачный фон
Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity . Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.
PNG в качестве фона
В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате PNG-24 (рис. 1). Особенностью этого формата является поддержка 256 уровней прозрачности, или попросту говоря, он умеет отображать полупрозрачные картинки.
Рис. 1. Изображение для создания фона
После чего добавляем рисунок в качестве фона через свойство background , как показано в примере 1.
Пример 1. Использование полупрозрачного рисунка
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Прозрачность в слое
Результат данного примера показан на рис. 3.
Рис. 2. Применение фонового рисунка
Устаревший браузер Internet Explorer 6 не работает с полупрозрачностью в PNG-24, если по каким-либо причинам необходимо поддерживать этот браузер, для него придется использовать скрипты.
Приведенный метод имеет ряд ограничений. Так, при отключении картинок в браузере, фон исчезнет вообще. К тому же не так легко изменить цвет фона и значение прозрачности, для этого придется опять редактировать изображение.
Клетчатое изображение
Этот метод относится совсем к древним способам реализации полупрозрачности, когда браузеры «ничего не умели», и приходилось искать нешаблонные решения. Фокус состоит в создании изображения, в котором чередуются прозрачные и непрозрачные пикселы (рис. 3). Такая регулярная структура создает эффект полупрозрачности, по сути его имитируя.
Рис. 3. Увеличенный клетчатый рисунок
Вот как в итоге это выглядит (рис. 4).
Рис. 4. Имитация полупрозрачности
Недостатки этого метода сравнимы с предыдущим, также может возникнуть муаровый узор и происходит ухудшение текста.
Свойство opacity
Свойство CSS 3 opacity задает значение прозрачности и варьируется от 0 до 1, где ноль это полная прозрачность элемента, а единица, наоборот, непрозрачность. У свойства opacity есть особенность — прозрачность распространяется на все дочерние элементы, и они не могут превысить значение прозрачности своего родителя. Получается, что непрозрачный текст на полупрозрачном фоне быть не может (пример 2).
Пример 2. Использование opacity
XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx
Прозрачность в слое
Результат примера показан на рис. 5.
Рис. 5. Полупрозрачность текста и фона
В Internet Explorer до версии 8.0 включительно opacity не работает, поэтому для него используется специфичное для этого браузера свойство filter . Естественно, оно приводит к невалидному коду CSS.
RGBA
Современный подход гораздо проще и нагляднее вышеприведенных методов и состоит в использовании для цвета и фона формат RGBA. Первые три буквы знакомы многим и расшифровываются как red, green, blue (красный, зеленый, синий), последняя символизирует собой альфа-канал и задает прозрачность элемента. Формат записи такой.
background-color: rgba(r, g, b, a);
В скобках вместо букв ставится значение компонента цвета, его можно посмотреть в любом графическом редакторе, последнее же значение устанавливает прозрачность и совпадает со значением свойства opacity .
Не все браузеры поддерживают такой формат: Internet Explorer начиная с версии 9, Opera с версии 10, Firefox с 3, Safari с 3.2. Но в целом, современные браузеры корректно отображают прозрачность. Для старых версий IE можно отдельно указать цвет в привычном для него формате, при этом, естественно, никакой прозрачности не будет. Или опять воспользоваться свойством filter , но тогда придется мириться, что прозрачность также затронет и текст (пример 3). Чтобы соблюсти валидный код CSS, я воспользовался условными комментариями.
Пример 3. Использование RGBA
HTML5 CSS3 IE Cr Op Sa Fx
Полупрозрачный фон
Рис. 6. Полупрозрачный фон с непрозрачным текстом
Сравните картинку с предыдущей, буквы стали ярче и четче.
В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.
Решается это заменой свойства background-color на background .
Однако здесь есть один нюанс. Валидатор CSS «ругается» на background , если ему задать значение в формате RGBA. Но при этом корректно относится к background-color . В общем, как всегда, приходится выбирать между браузерами и валидностью.
Прозрачность фонового изображения в CSS
opacity – это свойство CSS, которое позволяет настраивать прозрачность элемента. По умолчанию для всех элементов оно имеет значение 1. Приближая это значение к 0, вы можете сделать элемент более прозрачным.
Обычный вариант применения свойства opacity – использование изображения как части фона. Регулировка прозрачности может улучшить читаемость текста или поможет добиться желаемого визуального эффекта. Однако имейте в виду: невозможно менять opacity элемента background-image, не затрагивая при этом его дочерние элементы.
В этом руководстве мы предлагаем два метода обхода этого ограничения для фоновых изображений.
Требования
Чтобы следовать этой статье, вам понадобятся навыки работы с такими вещами:
- opacity.
- position: relative иposition: absolute.
- контекст наложения и z-index.
- псевдоэлементы :before и :after.
Метод 1: Изображения и абсолютное позиционирование
Первый подход будет основан на двух элементах (как можно понять из названия). Один из них – «обертка», которая обеспечивает точку отсчета с помощью position: relative. Второй – это элемент img, который появляется за контентом с помощью position: absolute и контекста наложения.
Разметка, написанная с применением этого подхода, может выглядеть так:
Hello World!
Соответствующие 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 устанавливает блок, содержащий абсолютное позиционирование. Для demo-bg ![]()
установлено значение position: absolute и присвоено свойство opacity . Для demo-content установлено значение position: relative. Из-за организации разметки он имеет более высокий контекст наложения, чем demo-bg. Также для более точного управления контекстом наложения можно использовать z-index.
У этого подхода есть некоторые ограничения. Во-первых, он предполагает, что ваше изображение достаточно велико, чтобы вместить любой элемент. Возможно, вам потребуется установить ограничения по размеру, чтобы изображение не выглядело обрезанным или не занимало всю высоту элемента. Во-вторых, вам потребуются дополнительные настройки, если вы хотите контролировать положение фона.
Метод 2: Псевдоэлементы CSS
Второй подход основан на псевдоэлементах. Псевдоэлементы :before и :after можно использовать для большинства CSS элементов. Как правило, вы предоставляете значение content и используете его для добавления дополнительного текста в начале или в конце. Однако так вы также можете добавить пустую строку, а затем использовать псевдоэлементы для дизайна.
Вот пример разметки для этого подхода:
Hello World!
А вот – ее сопутствующие стили:
.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
Эта разметка и стили выведут фразу «Hello World!» поверх изображения.
Родительский demo-wrap устанавливает блок, содержащий абсолютное позиционирование. Псевдоэлементу :before присвоено position: absolute с небольшой прозрачностью. Он использует background-size: cover, чтобы занять все доступное пространство.
Преимущество этого подхода заключается в поддержке других свойств фона, таких как background-position, background-repeat и background-size. Его недостатком является использование одного из псевдоэлементов, который может конфликтовать с другими эффектами дизайна – например, с clearfix.
Заключение
В этой статье мы рассмотрели два метода обхода ограничения для непрозрачных фоновых изображений.
Как можно поменять прозрачность background-image не меняя прозрачности остального содержимого блока?
Как можно поменять прозрачность картинки через opacity заданной с помощью background-image не меняя при этом прозрачности всего остального содержимого div ? К примеру:
Текст
Меняя opacity класса "block" естественно будет меняться opacity и заголовка в том числе, но нужно только background-image
Отслеживать
задан 21 мая 2018 в 14:02
75 1 1 золотой знак 3 3 серебряных знака 11 11 бронзовых знаков
покажите ваш код . дальше будет видно
21 мая 2018 в 14:05
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
Такого свойства как background-opacity нет, но есть такая альтернатива: можно заменить background псевдоэлементом, и применить opacity уже к нему.
div < width: 200px; height: 200px; display: block; position: relative; >div::after < content: ""; background: url(http://calculate-this.com/sites/default/files/styles/large/public/field/image/cat-3-icon.png?itok=w4QTmWF4); opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; >
Отслеживать
ответ дан 21 мая 2018 в 14:20
86 3 3 бронзовых знака
.block < width:300px; height: 200px; position: relative; background:url(http://on-desktop.com/wps/Nature___Fields_Hilly_landscape_042589_.jpg); >.block2 < position: relative; left:40px; top:-140px; width:300px; height: 200px; z-index:1; >.block2::before < content:""; opacity: 0.5; position: absolute; z-index:-1; top: 0; left: 0; bottom: 0; right: 0; background:url(http://on-desktop.com/wps/Nature___Fields_Hilly_landscape_042589_.jpg); background-size:cover; >
foo bar baku reku
Отслеживать
ответ дан 21 мая 2018 в 14:16
user245150 user245150
можно же inherit не обязательно указывать url
21 мая 2018 в 14:26
@МаксимЛенский, inherit не будет работать в таком случае. Так как оно наследует свойство от родительского элемента. У block2 нет background , соответственно нечего наследовать.
21 мая 2018 в 14:40
@Arthur смотри мой пример .
21 мая 2018 в 14:40
@МаксимЛенский, ты не понял. block1 & block2 существуют отдельно. В примере Duoxx'a псевдоэлемент у block2 , в котором не может работать наследование.
21 мая 2018 в 14:43
@МаксимЛенский, я про это и говорю=)
21 мая 2018 в 14:45
Если это просто какой-то цвет, то можно задать его с помощью rgba .
text
А если картинка, то никак. Можно воспользоваться png фоном, либо сделать замену, когда нужно, например если экран стал маленький и нужно сделать фон прозрачным, то можно использовать media и просто подменить на картинку с нужной прозрачностью.
Хотя думаю, что найдутся какие-нибудь костыльные варианты
Отслеживать
ответ дан 21 мая 2018 в 14:13
uzi_no_uzi uzi_no_uzi
2,186 2 2 золотых знака 18 18 серебряных знаков 50 50 бронзовых знаков
Ну как костыль вариант Duoxx с абсолютным позиционированием который пришел мне в голову. Если картинка то я думаю перенести содержимое блока в соседний блок лучшее решение.
21 мая 2018 в 14:21
@Telion, да, я тоже об этом подумал.
21 мая 2018 в 14:22
К примеру, если фон из фото и надо его сделать прозрачным можно поступить этим способом
* < margin: 0; padding: 0; >.item < width: 100vw; height: 100vh; background: url(http://nevseoboi.com.ua/uploads/posts/2012-02/1328215556-496551-0031795_www.nevseoboi.com.ua.jpg); background-size: 0 0; position: relative; padding-top: 20px; >.item:before < content: ""; display: block; width: inherit; height: inherit; position: absolute; top: 0; left: 0; background: inherit; background-size: cover; opacity: .4; >.item p
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolore veniam similique libero adipisci officia unde, est neque harum. Corrupti ut consequatur totam maiores eveniet amet doloremque voluptatibus nostrum eaque nam dignissimos recusandae fuga ab, deleniti quo eligendi, repellat ea fugiat nesciunt reiciendis. Hic deleniti praesentium maxime esse consequuntur ut nesciunt!
Изменение прозрачности фонового изображения CSS
С CSS и CSS3 можно сделать много интересных вещей, но установка непрозрачного фона CSS не входит в их число. Однако существует очень много творческих подходов, которые могут помочь добиться эффекта изменения прозрачности фонового изображения CSS. Оба приведенных ниже метода имеют отличную поддержку браузеров вплоть до Internet Explorer 8.
Метод 1. Использование абсолютного позиционирования и изображения
Название этого метода описывает его содержание. Вы просто используете абсолютное позиционирование для нормального тега img и делаете его таким, как если бы вы использовали свойство CSS background-image . Для этого достаточно поместить изображение в контейнер position: relative; . Вот так обычно выглядит разметка HTML:
div class="demo_wrap"> h1>Hello World!h1> img src="https://assets.digitalocean.com/labs/images/community_bg.png"> div>
Вот так выглядит код CSS:
.demo_wrap position: relative; overflow: hidden; padding: 16px; border: 1px dashed green; > .demo_wrap h1 padding: 100px; position: relative; z-index: 2; > .demo_wrap img position: absolute; left: 0; top: 0; width: 100%; height: auto; opacity: 0.6; >
Здесь важно обеспечить абсолютное позиционирование изображения и растянуть его так, чтобы оно заполнило весь родительский контейнер. При этом важно относительное позиционирование всех элементов, чтобы вы могли установить индекс z-index , поднимающий их над изображением.
Ниже приведена демонстрация:
Hello World!
Метод 2. Использование псевдоэлементов CSS
Этот метод с первого взгляда выглядит простым, и я его определенно предпочитаю. Используя псевдоэлементы CSS :before или :after , вы устанавливаете div с фоновым изображением и задаете для него прозрачность. При этом разметка HTML будет выглядеть примерно так:
div class="demo_wrap"> h1>Hello World!h1> div>
Вот так выглядит код CSS:
.demo_wrap position: relative; background: #5C97FF; overflow: hidden; > .demo_wrap h1 padding: 50px; position: relative; z-index: 2; > /* You could use :after - it doesn't really matter */ .demo_wrap:before content: ' '; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; opacity: 0.6; background-image: url('https://assets.digitalocean.com/labs/images/community_bg.png'); background-repeat: no-repeat; background-position: 50% 0; background-size: cover; >
Здесь нам снова нужно переместить z-index содержимого (в данном случае ) над псевдоэлементом background, и мы должны явно определить position: absolute; и z-index: 1 на псевдоэлементе :before .
Остальные атрибуты псевдоэлемента располагают его так, чтобы он на 100% перекрывал родительский элемент, а также используют новое полезное свойство CSS: background-size: cover , которое определяет размер фона для покрытия элемента без изменения пропорций. Ниже приведена прекрасная демонстрация этого метода:
Hello World!
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.