Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| Группирует значения. | [ crop || cross ] | |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
В качестве значения выступает число из диапазона . Значение 0 соответствует полной прозрачности элемента, 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6 .
Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div { opacity: 1 ; }
Результат данного примера показан на рис. 1.
Рис. 1. Результат использования opacity
Объект .style.opacity
Firefox до версии 3.5 поддерживает свойство -moz-opacity .
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter : alpha(opacity=50) , где параметр opacity может принимать значение от 0 до 100.
Каждая спецификация проходит несколько стадий одобрения.
Как задать в css прозрачный цвет? На текущий момент для этого есть 3 способа.
Если вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:
Color: transparent;
Такой текст нельзя будет увидеть на странице.
А это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:
Background: rgb(230, 121, 156);
Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.
Background: rgba(0, 0, 0, 0);
В таком случае остальные 3 цифры особой роли не играют.
Полупрозрачный же цвет можно задать, если в качестве четвертого параметра задать значение от 0.01 до 0.99. О уже писал немного о задании полупрозрачности фону в , можете ознакомиться, если интересно.
Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .
В общем-то, на данный момент это все известные мне способы задания прозрачного цвета в css. Зачем это нужно, это уже другой вопрос. Через прозрачный фон может быть видно то, что находится под ним. Иногда так нужно сделать по дизайну. В целом, прием с полупрозрачностью сегодня очень распространен.
Как вы возможно знаете, background – это css-свойство, которое позволяет задать цвет фона или загрузить изображение, которое будет выступать в качестве фонового.
Итак, все это делается очень просто благодаря такому формату записи цвета, как rgba . Если вы работаете с графическими редакторами, то наверняка знаете, что цветовой режим rgb расшифровывается так: доля красного цвета (red), доля зеленого (green) и синего (blue). Так вот, rgba практически тоже самое, только добавляется еще один параметр – прозрачность. Записывается так:
Background-color: rgba(173, 57, 22, 0.5)
Сначала мы явно указываем, что задаем цвет в режиме rgba. Потом указываем значения насыщенности трех основных цветов от 0 до 255, где 255 – наибольшая насыщенность. Четвертый параметр это и есть наша прозрачность. Здесь пишется значение от 0 до единицы. 1 – полностью непрозрачный элемент, а 0 – полностью прозрачный. Соответственно, если выставить 0, то фонового цвета не будет видно вообще.
Теперь вы знаете, как в css у свойства background задать прозрачность. Для этого нужно использовать цветовой режим rgb a. Есть еще свойство opacity , но оно применяется ко всему элементу в целом. То есть при применении opacity прозрачность может примениться и к тексту, что сделает его нечитаемым.
Преимущества полупрозрачного фона легко показать на примере. Например, у нас есть общий фон страницы. Вот так бы выглядел блок, если бы ему был задан сплошной черный цвет:
А теперь зададим этот же черный цвет блоку, но укажем его с помощью цветового формата rgba, указав последнее значение в 0.7, например. Получится так:
Теперь фон блока просвечивается и через него видно фоновую картинку. Данная картинка и фон приведены лишь для примера. Как вы понимаете, в css background прозрачность может пригодиться, когда вам надо, чтобы фон вложенного элемента просвечивался, не закрывая другие фоны, расположенные в других слоях.
Сам цвет задавать с помощью rgba не сложно. Как уже и говорилось — первые три буквы означают три основных цвета: красный, зеленый и синий, а точнее их долю (от 0 до 255). Прописывая разные значения можно получать миллионы разных цветов, а полупрозрачность позволит вам придумать еще массу красивых эффектов для сайта, если это нужно будет.
Подробности Категория: вебдизайнер Автор: SEO & WEB - KELL4Эффект полупрозрачности элемента хорошо заметен на фоновом рисунке и получил распространение в разных операционных системах, потому что смотрится стильно и красиво. Главное, иметь под полупрозрачными блоками не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной.
Такой эффект достигается разными способами, включая старомодные методы, как использование рисунка 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
свойства оpacity
позволяет задать прозрачность того элемента, к которому применяется. Значения, которые можно использовать в качестве аргумента изменяются в пределах от 0 до 1.
Рассмотрим пример.
< html> < head> < title> TODO supply a title < meta charset= "UTF-8" > < link rel= "stylesheet" media= "all" type= "text/css" href= "css/style2.css" /> < body> < div class = " prozrachen " > Тут будет много Вашего текста
/* Фон для тела страницы */ } . prozrachen { padding: 10px; /*Отступы для текста*/ background: darkturquoise; /* Задаем цвет фона */ margin: 0 auto; /* Центрируем блок */ width: 50 %; /* Задаем ширину блока */ opacity: 0.7 ; /* Задаем прозрачность */ font: 48px/ 64px Times New Roman; text- align: justify; }
В результате мы получили полупрозрачный блок:
Важно!!!
filter: alpha(Opacity= 70 ) ;
Стоит принимать во внимание то, что свойство filter отсутствует в html спецификациях, изменяет значения от 1 до 100 и может применяться только к элементам:
Для лучшего понимания материала последнего пункта, в предыдущем примере зададим тексту белый цвет
color: white;
и рассмотрим его под микроскопом:
Как видим, контент нашего блока (текст) тоже стал полупрозрачным. Но что делать, если на практике прозрачность содержимого вас не интересует, а интересует лишь прозрачность фона? В таком случае, переходим к следующему пункту.
Интересной особенностью формата PNG является то, что он имеет 256 уровней прозрачности. Думаю, Вы уловили ход мыслей, и наверняка уже построили алгоритм работы такого подхода. Мне остается только его озвучить.
В результате мы получили блок с прозрачным фоном и непрозрачным содержимым:
Важно!!!
Одним из самых современных методов изменения транспарантности фона является применение системы RGBA .
RGBA – система представления цвета при помощи трех стандартных каналов RGB (красный, зеленый, синий), и четвертого, так называемого Alpha -канала, характеризующего степень прозрачности.
background: rgba(r, g, b, a) ;
В уже известном нам примере, заменим содержимое в CSS файле на следующее:
body { background: url(./ vaden- pro- logo. png) ; /* Фоновый рисунок */ } . prozrachen { padding: 10px; background: rgba(0 , 206 , 209 , 0.7 ) ; margin: 0 auto; width: 50 %; font: 48px/ 64px Times New Roman; color: white; text- align: justify; }
Важно!!!
Этот метод стоял у истоков веб-дизайна, и видел старые-старые браузеры, которые ничего толком не умели. Он заключается в создании клетчатого фона, в котором цветные квадратики чередовались с прозрачными.
В результате применения такой картинки в качестве background получали псевдо-прозрачный фон.
Важно!!!
Влад Мержевич
Частичная прозрачность при правильном ее использовании весьма эффектно смотрится в дизайне сайта. Главное, чтобы под полупрозрачными блоками был не однотонный рисунок, а изображение, именно в этом случае прозрачность становится заметной. Такой эффект достигается разными способами и если вспоминать все, включая старомодные методы, то это использование рисунка PNG в качестве фона, создание клетчатого изображения и свойство opacity . Но как только возникает необходимость сделать в блоке полупрозрачный фон, у этих методов оказываются неприятная оборотная сторона. Сделаю небольшой обзор, чтобы стало понятно, о чем идет речь, а также для тех читателей, которые не знакомы с нетрадиционными вариантами создания эффекта полупрозрачности.
В графическом редакторе предварительно готовится однотонный полупрозрачный рисунок, который сохраняется в формате 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. Имитация полупрозрачности
Недостатки этого метода сравнимы с предыдущим, также может возникнуть муаровый узор и происходит ухудшение текста.
Свойство 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. Первые три буквы знакомы многим и расшифровываются как 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 . В общем, как всегда, приходится выбирать между браузерами и валидностью.
