Как сделать прозрачный блок в css. Прозрачный цвет и фон в CSS
CSS прозрачность - кросс-браузерное решение - 3.8 out of 5 based on 6 votes
В данном уроке мы рассмотрим CSS прозрачность, узнаем как придать различным элементам страницы прозрачность и добиться полной кросс-браузерности, т. е. одинаковой работы этого эффекта в различных браузерах.
Как задать прозрачность любого элемента
В CSS3 за создание прозрачных элементов отвечает свойство opacity, которое можно применять к любым элементам. У данного свойства имеются значения от 0 до 1, которые и определяют степень прозрачности. Где 0 - это полная прозрачность, (значение по умолчанию для всех элементов), а 1 полная непрозрачность. Записываются значения дробями: 0.1, 0.2, 0.3 и т. д.
Пример использования:
Кросс-браузерность прозрачности
Не все браузеры одинаково воспринимают и реализуют указанное выше свойство opacity. В некоторых случаях необходимо использовать другое название свойства или фильтры.
Свойство CSS3 opacity поддерживают следующие виды браузеров Mozilla 1.7 +, Firefox 0.9 +, Safari 1.2 +, Opera 9 +.
Такой хороший:) браузер как Internet Explorer вплоть до версии 9,0 не поддерживает свойство opacity и для создания прозрачности для этого браузера нужно использовать свойство filter и значение alpha(Opacity=X), в котором Х - это целое число в диапазоне от 0 до 100 при помощи которого определяется уровень прозрачности. 0 - это полная прозрачность, а 100 - полная непрозрачность.
Что касается браузера Firefox до версии 3.5 он поддерживает свойство -moz-opacity вместо opacity.
Такие браузеры как Safari 1.1 и Konqueror 3.1, построенные на движке KHTML, используют для управления прозрачностью свойство: -khtml-opacity.
Как же задать в CSS прозрачность, чтобы это выглядело во всех браузерах одинаково? Для создания кросс-браузерного решения для прозрачности элементов им нужно прописывать не только одно свойство opacity, а следующий набор свойств:
filter: alpha(Opacity=50); /* Прозрачность для IE */ -moz-opacity: 0.5; /* Поддержка Mozilla 3.5 и ниже */ -khtml-opacity: 0.5; /* Поддержка Konqueror 3.1 и Safari 1.1 */ opacity: 0.5; /* Поддержка всех остальных браузеров */
Прозрачность различных элементов
Рассмотрим некоторые примеры задания прозрачности определенным элементам, которые чаще всего используются на странице.
CSS прозрачность картинки.
Рассмотрим несколько вариантов создания полупрозрачной картинки. В следующем примере первой картинки не задана прозрачность, вторая имеет прозрачность 50%, третья 30%.
Результат:
Прозрачность на CSS при наведении курсора на картинку.
Часто необходимо сделать прозрачным картинку или любой другой элемент в тот момент когда на его наведен курсор. Сделать это можно при помощи CSS псевдокласса:hover. Для этого нашей картинке нужно прописать два класса один обычный - это будет неактивное состояние картинки и второй класс с псевдоклассом:hover, здесь необходимо указать прозрачность картинки в момент наведения курсора.
Результат можете посмотреть в демо.
Прозрачность фона на CSS.
Здесь необходимо помнить, что прозрачность распространяется на все вложенные элементы и они не могу обладать большей прозрачностью чем вложенный элемент.
В качестве примера приведем вариант с фоном страницы созданным при помощи картинки и блоком с фоном созданным при помощи цвета и обладающим прозрачностью 50%.
Пример кода:
Вот результа размещенного выше кода:
Создание прозрачного фона в HTML и CSS (эффекты opacity и RGBA)
Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространение в разных операционных системах, потому что смотрится стильно и красиво. Главное, иметь под полупрозрачными блоками не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной.
Такой эффект достигается разными способами, включая старомодные методы, как использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity. Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятные оборотные стороны.
Рассмотрим полупрозрачность текста и фона - как правильно ее использовать в дизайне сайта:
Основная особенность этого свойства состоит в том, что значение прозрачности действует на все дочерние элементы внутри, а не только на фон. Это значит, что и фон и текст станут полупрозрачными. Увеличить уровень прозрачности можно изменяя команду opacity от 0.1 до 1.
HTML 5 CSS 3 IE 9
В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента.
Обычно в дизайне полупрозрачным должен быть только фон элемента, а текст непрозрачным для сохранения его читабельности. Свойство opacity здесь не подходит, потому что текст внутри элемента также будет частично прозрачным. Лучше всего использовать формат RGBA, частью которого является альфа-канал или иными словами значение прозрачности. В качестве значения пишется rgba, затем в скобках через запятую перечисляются значения красной, синей и зелёной компоненты цвета. Последним идёт прозрачность, которая задаётся от 0 до 1, при этом 0 означает полную прозрачность, а 1 непрозрачность цвета - синтаксис применения rgba.
Полупрозрачный фон HTML 5 CSS 3 IE 9
Для управления прозрачностью элементов страницы используется свойство CSS opacity. По спецификации оно применимо к узлам любого типа и поддерживается во всех современных браузерах. С его помощью можно создать интересный дизайн или реализовать удобное интерактивное взаимодействие с пользователем.
Возможные значения
Синтаксис свойства opacity в css выглядит так:
Selector { opacity: 1; } selector { opacity: 0; } selector { opacity: 0.4; }
На вход принимаются числовые значения в диапазоне от 0 до 1. Параметр может представлять собой доли единицы, при этом в качестве разделителя целой и дробной части в CSS используется точка.
Элемент с нулевой прозрачностью становится невидимым, но все равно продолжает занимать свое место на странице и сохраняет возможность взаимодействовать с пользователем.
Если значение свойства отличается от нуля, то реальная прозрачность будет вычисляться как процент от некоторого верхнего предела. В обычной ситуации opacity: 1 определяет полную непрозрачность элемента.
Прозрачность дочерних узлов
Однако если элемент имеет родителя, прозрачность которого отличается от единицы, вычисление изменяется. Потомок не может быть "менее прозрачным", чем любой из его предков. Значение CSS-свойства opacity родительского блока становится верхним пределом прозрачности дочернего узла.
Parent { opacity: 0.7; } child { opacity: 1; }
В подобной ситуации элемент child будет на 30 % прозрачным, несмотря на то что значение opacity равно единице.
Примеры использования
Пример 1. Полупрозрачность. Необходимо, чтобы под элементом target был виден основной фон блока.
Target { background: black; opacity: 0.5; }
Полупрозрачным становится не только фон блока target, но и текст.
Пример 2. Динамическое управление прозрачностью. Значение свойства CSS opacity блока target изменяется при наведении на него курсора.
Target { opacity: 0.2; } .target:hover { opacity: 1; }
Динамическая прозрачность
Последний пример демонстрирует, что прозрачные элементы продолжают реагировать на события страницы, такие как наведение курсора. Это позволяет использовать javascript для управления свойством CSS opacity, а также применять механизмы transition и animation для плавного изменения режима отображения.
Чтобы получить доступ к прозрачности из скрипта, нужно обратиться к объекту style конкретного элемента.
// получение текущего значения прозрачности var opacity = element.style.opacity; // установка нового значения element.style.opacity = 0.4;
Плавное исчезновение блока можно реализовать с помощью CSS-свойства transition:
Element { opacity: 0.1; transition: opacity 1000ms; } element:hover { opacity: 0.8; transition: opacity 2000ms; }
Теперь узел element при наведении мышки будет изменять прозрачность от 10 до 80 % в течение одной секунды, а при уходе курсора - тускнеть до исходного значения в течение двух секунд.
Свойство CSS opacity в сочетании с механизмом transition позволяет создавать красивые эффекты.
Альфа-канал вместо opacity
Главные тонкости механизма opacity в CSS:
- его действие распространяется не только на фон блока, но и на его текстовый контент, который предпочтительнее оставлять четким;
- дочерние элементы не могут быть менее прозрачными, чем родительские.
Если эти эффекты осложняют жизнь верстальщика, вместо opacity следует использовать просто прозрачный фон, определив его значение в формате RGBA или HSLA.
Влад Мержевич
Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка 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%.
