Background прозрачность css – серый прозрачный фон. Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA) Css прозрачная заливка
Влад Мержевич
Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка 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.
Рис. 6. Полупрозрачный фон с непрозрачным текстом
Сравните картинку с предыдущей, буквы стали ярче и четче.
В браузере Internet Explorer 7 обнаружился баг при сочетании background-color с разными значениями. К примеру, если задать цвет фона красным, как показано ниже, то фон в IE7 вообще не отобразится.
Div { background-color: red; /* В IE7 не применяется */ background-color: rgba(255, 0, 0, 0.5); }
Решается это заменой свойства background-color на background .
Div { background: red; /* А это работает */ background: rgba(255, 0, 0, 0.5); } Однако здесь есть один нюанс. Валидатор CSS «ругается» на background , если ему задать значение в формате RGBA. Но при этом корректно относится к background-color . В общем, как всегда, приходится выбирать между браузерами и валидностью.
Доброго времени суток, гики веб-разработки, а также ее новички. Для тех, кто не следит за трендами IT-области, а точнее за веб-модой, я хочу торжественно сообщить, что эта публикация на тему: «Как сделать прозрачный блок css инструментами» вам как раз кстати. Ведь в текущем 2016 году внедрение в онлайн-сервисы различных прозрачных объектов считается стильным ходом.
Поэтому в этой статье я расскажу вам о всех существующих способах создания прозрачности, начиная от допотопных решений, сделаю акценты на совместимости решений с браузерами, а также приведу конкретные примеры программного кода. А теперь за работу!
Способ 1. Допотопный
Когда еще были слабые компьютеры и не развиты «способности» , девелоперы придумали свой способ создания прозрачного фона: использование прозрачных пикселей по очереди с цветными. Таким образом создаваемый блок при масштабировании выглядел как шахматная доска, однако в обычном размере он напоминал некую прозрачность.
Этот, по моему мнению, «костыль» конечно выручает в старых версиях браузеров, в которых не работают современные решения. Но стоит отметить, что качество отображения текста, вписанного в такой , резко падает.
Способ 2. Не замороченный
В редких случаях разработчики решают проблему с внедрением полупрозрачной картинки путем вставки…уже готовой полупрозрачной картинки! Для этого используются изображения, сохраненные в формате PNG-24. Данный графический формат позволяет задавать 256 уровней полупрозрачности.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Однако такой способ не удобен по нескольким причинам:
- Internet Explorer 6 не работает с такой технологией, для него нужно писать скриптовый код;
- Нельзя видоизменять цвета фона в css;
- Если в браузере отключена функция отображения изображений, то исчезнет.
Способ 3. Пропиаренный
Наиболее распространенный и всем известный способ сделать какой-либо блок прозрачным является свойство opacity .
Значение параметра варьируется в диапазоне , где при 0 объект невидим, а при 1 – отображается полноценно. Однако и здесь есть некие неприятные моменты.
Во-первых, все дочерние элементы наследуют прозрачность. А это значит, что вписанный текст также будет «просвечиваться» вместе с фоном.
Во-вторых, Internet Explorer опять «воротит носом» и вплоть до 8 версии не функционирует с opacity .
Для решения этой проблемы используется filter: alpha (Opacity=значение) .
Рассмотрим пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Способ 4. Современный
На сегодняшний день профессионалы пользуются инструментом rgba (r, g, b, a).
До этого я рассказывал, что RGB – это одна из популярных цветовых моделей, где R отвечает за все оттенки красного, G – оттенки зеленого и B – оттенки синего.
В случае с параметром css переменная A отвечает за альфа-канал, который в свою очередь отвечает за прозрачность.
Главное преимущество последнего способа – альфа-канал не затрагивает объекты, находящиеся внутри стилизованного блока.
rgba (r, g, b, a) поддерживается начиная с:
- 10 версии Opera;
- Internet Explorer 9;
- Safari 3.2;
- 3 версии Firefox.
Хочу отметить интересный факт! Горячо любимый Internet Explorer 7 выдает ошибку при сочетании свойства background-color с названием цветов (background-color: gold). Поэтому стоит использовать только:
background-color: rgba (255, 215, 0, 0.15)
А теперь пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
В нашем магазине вы найдете все виды цветов.
|
Обратите внимание, что текстовый контент блока полностью виден (100% черный), в то время как фону задан альфа-канал равный 0,88, т.е. 88%.
Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).
Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.
Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…
С помощью RGBa решение выглядит следующим образом:
1. Допустим, нам нужен синий фон с прозрачностью 50%.
А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x
2. Для IE можно постараться и сделать более изящно:
.element{ background : transparent ; filter:progid :DXImageTransform .Microsoft .gradient(startColorstr= #990000ff , endColorstr= #990000ff ) ; zoom: 1 ; } |
Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF - полностью непрозрачный, 00 - прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.
Использование RGBa не ограничивается только фоновым цветом у блоков…
Прямым путём прозрачность фонового изображения (по крайней мере на 2016-ый год) никак через CSS (включая CSS 3) не установишь. Есть множество обходных способов решения данной проблемы.
Смешение фонов
Самым простым решением является смешнивание двух фонов (изображения и полупрозрачного цвета). Этот способ подойдёт если под "прозрачным фонововым изображением" однотипный фон т.к. это не прозрачность вовсе, а её имитация за счёт смешения изображения с цветом. Устанавливаете двойной фон состоящий из фонового изображения и нужного цвета с альфа-каналом. После этого выбираете наиболее подходящий режим смешивания и альфа-каналом цвета настраивате композицию до нужного результата.
Background: url("/images/img1.jpg"), rgba(255,255,255,0.9); background-blend-mode: color;
Добавление псевдоэлемента
Лучший способ достичь желаемого. Создаём псевдоэлемент при помощи псевдокласса after. Имеется
#main { position: relative; } #main:after { content: ""; display: block; position: absolute; top: 0; left: 0; background-image: url(/wp-content/uploads/2010/11/tandem.jpg); width: 100%; height: 100%; opacity: 0.2; z-index: -1; }
Сегодня я хочу поговорить о прозрачном фоне блока текста, как его делать, и что для этого предлагает CSS3. Перед тем, как перейти к rgba и hsla, рассмотрим примеры использования полупрозрачного фона для блока с текстом, а точнее то, как это достигается и какие проблемы возникают. Для демонстрации будем использовать вот эту картинку, обработанную какой-то программой на java, и линк на которую, к сожалению, был давно утерян.
Смотрим на картинку ниже. Имеется графический фон, на который требуется наложить полупрозрачный блок с текстом. В идеале должно быть то, что на рисунке под цифрой 2, но иногда может возникать то, что под цифрой 3. Есть ещё один дефект, но о нём упомяну словесно чуть ниже, т.к. отскриншотить его не было возможности.
Полупрозрачный фон без rgba и hsla
- Полупрозрачный PNG
. Оптимальный вариант, т.к. на сегодняшний день он самый кроссбраузерный и самый простой. Для того, чтобы блок был прозрачен, необходим однопиксельный полупрозрачный PNG, который задан в качестве бэкграунда блока. И всё.
Недостатки : Только один – требуется . - Прозрачность через opacity
. Прозрачность блока задаётся кроссбраузерно следующим образом:
opacity:0.5;
filter:alpha(opacity=50);
-moz-opacity:0.5;где 0,5 и 50 – это 50% прозрачности. Но есть проблема. Если мы зададим нужному нам блоку такую полупрозрачность, то мы увидим тот третий вариант на изображении выше – контент блока также станет полупрозрачным. Однако выход есть – свободное позиционирование, при помощи которого под блок текста кладётся другой блок, которому и задана полупрозрачность..
Рассмотрим пример. Пусть блок с оранжевой картинкой – это тег body, контейнер, в котором будет и текст и прозрачная подложка – #block_bg, внутри которого блок с полупрозрачным фоном #block_transparent, а блок с текстом – #block_text.
Текст текст текст, много-много текстаbody { background: url(image.jpg); }
#block_bg {
position: relative;
overflow: hidden;
width: 400px;
padding: 10px;
}
#block_text { position: relative; z-index: 100; }
#block_transparent {
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
background: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 90;
height: 5000px;
width: 400px;
}Обращаю внимание, что необходимо задавать ширину прозрачного блока (строка 19), иначе он свернётся в 1 пиксел, и ширину общего блока (строка 5), иначе текст будет выходить за пределы прозрачного блока (хотя ширину можно и тексту задать, но принципиальной разницы не будет). Чтобы были отступы от текста и края прозрачного блока, используем паддинг в шестой строке. Чтобы прозрачность была регулируема по высоте, задаём ей высоту побольше (строка 18) и перекрытие для общего блока (строка 4).
Итак, мы запихнули всё в один блок, который можно пихать в любую часть страницы, где есть интересная подложка. Да, может возникнуть желание поставить бэкграунд общему блоку block_bg, но лучше не стоит – осложните себе жизнь (в зависимости, конечно, от задачи). Иными словами, лучше всю эту конструкцию запихнуть в отдельный блок, которому задать паддинг и не мучиться.
Недостатки : Слишком громоздко.
rgb и hsl, rgba и hsla – свойства CSS3
Точнее это не совсем свойства – это новая возможность задавания цвета для таких свойств как background, color, border и т.д.
Название свойств пошли от цветовых систем RGB (Red, Green, Blue) и от HSL (Hue, Satutation, Lightness). Первая система описывает цветовое пространство посредством смешивания основных цветов – красного, зелёного и синего. Во второй системе компоненты цвета отображают информацию о цвете в более привычной для человека форме: Что это за цвет? Насколько он насыщенный? Насколько он светлый или тёмный?
rgb и rgba
Начнём с rgb и rgba. Значения r, g, b могут задаваться от 0 до 255 или от 0% до 100%. Значение a (alpha, прозрачность) измеряется от 0 до 1 (дробные значения задаются через точку – 0.4, 0.7 и т.д.). Если для r, g и b будут задаваться значения, превышающие их допустимый диапазон (например, 300 или 110% или -5), то они сократятся к ближайшему допустимому значению.
Рассмотрим всё на примере свойства background (хотя желающие могут взять color или border).
background: rgb(0, 0, 255); /*чисто синий цвет*/
background: rgb(100%, 50%, 0%); /*чисто синий цвет*/
background: rgb(10, 145, 500); /*будет распознано как 10, 145, 255*/
background: rgba(10, 145, 255, 1); /*тоже самое, что и предыдущее*/
background: rgba(100, 50, 255, 0.1); /*очень прозрачный оттенок сиреневого*/
Да, забыл сказать, что нельзя между свойством и открывающей скобкой ставить пробел и нельзя задавать в одной строке одни значения в обычных числах, а другие в процентах. Если так сделаете – ничего не будет работать.
hsl и hsla
И несколько слов о hsl и hsla. Значение a задаётся также, как и у rgb и rgba, а с первыми тремя параметрами дело обстоит немного по другому. h задаётся от 0 до 360, а s и l – от 0% до 100%.
И самое главное. Если в rgb определить цвет из головы очень сложно (почти всегда необходима сторонняя программа с "пипеткой"), то здесь достаточно иметь одну картинку перед глазами, чтобы всё стало на свои места. Картинка показывает оттенки параметра h.
Чтобы прикинуть необходимый цвет, выбираем оттенок, затем прикидываем s, насыщенность цвета (где 0% – это ненасыщенный цвет (оттенок серого), а 100% – самая насыщенность) и его светлоту (0% – при нём цвет всегда будет чёрный, а при 100% - белый). Исходя из вышесказанного, на картинке показаны световые тона при насыщенности 100% и светлоте 50%.
Теперь всё цветовое пространство в голове как на ладони. Конечно ручной подбор не заменяет пипетку, да и не всем нужно в голове иметь "цветовое пространство", но иногда, чтобы быстро прикинуть что надо и потестить – оно подходит.
И буквально пара примеров
background: hsl(180, 100%, 50%); /*насыщенный голубой цвет*/
background: hsla(140, 50%, 30%, 0.5); /*полупрозрачный, едва заметно, что оттенок зелёного*/
Недостатки : все 4 свойства не поддерживаются ишаком и старыми браузерами.
Завершение
В общем, CSS3 даёт очередные очень полезные вещи, но как всегда, IE – основной тормоз прогресса. Для сайтов клиентов я бы пока воздержался от использования (ещё мозг зазря будут выносить) и брал бы вариант с PNG. А на своём сайте – почему бы и нет. Особенно, если его посещают продвинутые люди, не сидящие на ишаках или каких-либо осколках древности.