Оглавление:
Статья последний раз была обновлена 02.07.2024
Сегодня я хочу поговорить о прозрачном фоне блока текста, как его делать, и что для этого предлагает CSS3. Перед тем, как перейти к rgba и hsla, рассмотрим примеры использования полупрозрачного фона для блока с текстом, а точнее то, как это достигается и какие проблемы возникают.
Полупрозрачный фон без rgba и hsla
- Полупрозрачный PNG. Оптимальный вариант, т.к. на сегодняшний день он самый кроссбраузерный и самый простой. Для того, чтобы блок был прозрачен, необходим однопиксельный полупрозрачный PNG, который задан в качестве бэкграунда блока. И все. Недостатки: требуется хак для IE6 и младше, устраняющий проблему с полупрозрачностью.
- Прозрачность через 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; }
Обращаю внимание, что необходимо задавать ширину прозрачного блока, иначе он свернется в 1 пиксел, и ширину общего блока, иначе текст будет выходить за пределы прозрачного блока (хотя ширину можно и тексту задать, но принципиальной разницы не будет). Чтобы были отступы от текста и края прозрачного блока, используем паддинг в шестой строке. Чтобы прозрачность была регулируема по высоте, задаем ей высоту побольше и перекрытие для общего блока.
Итак, мы запихнули все в один блок, который можно вставить в любую часть страницы, где есть интересная подложка. Да, может возникнуть желание поставить бэкграунд общему блоку 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. А на своем сайте — почему бы и нет. Особенно, если его посещают продвинутые люди, не сидящие на ишаках или каких-либо осколках древности.
- Переадресация домена на другой домен - 08.08.2023
- Как установить и удалить GNOME? - 31.07.2023
- Как узнать, какие поисковые запросы ведут на конкретную страницу сайта? - 29.06.2023