Для создания эффекта прозрачности в CSS используется свойство opacity .

Браузер IE8 и более ранние его версии поддерживают альтернативное свойство - filter:alpha(opacity=x) , где " x " может принимать значение от 0 до 100 , чем меньше значение, тем прозрачнее будет элемент.

Все остальные браузеры поддерживают стандартное CSS свойство opacity , которое может принимать в качестве значения числа от 0.0 до 1.0 , чем меньше значение, тем прозрачнее будет элемент:

Попробовать »

Прозрачность при наведении

Псевдо-класс:hover позволяет изменять внешний вид элементов при наведении на них курсора мыши. Мы воспользуемся этой возможностью, чтобы изображение при наведении мыши теряло свою прозрачность:

Попробовать »

Прозрачность фона

Есть два возможных способа сделать элемент прозрачным: свойство opacity , описанное выше, и указание цвета фона в RGBA формате.

Возможно вы уже знакомы с моделью представления цвета в формате RGB . RGB (Red, Green, Blue - красный, зеленый, синий) - цветовая система, определяющая оттенок путем смешивания красного, зеленого и синего цветов. Например, для задания желтого цвета для текста можно воспользоваться любым из следующих объявлений:

Color: rgb(255,255,0); color: rgb(100%,100%,0);

Цвета, заданные с помощью RGB , будут отличаться от шестнадцатеричных значений, используемых нами до этого тем, что позволяют использовать альфа-канал прозрачности. Это значит, что сквозь фон элемента с альфа-прозрачностью будет видно то, что располагается под ним.

Объявление цвета RGBA схоже по синтаксису со стандартными правилами RGB . Однако, кроме всего прочего, нам потребуется объявить значение как RGBA (вместо RGB) и задать дополнительное десятичное значение прозрачности после значения цвета в промежутке от 0.0 (полная прозрачность) до 1 (полная непрозрачность).

Color: rgba(255,255,0,0.5); color: rgba(100%,100%,0,0.5);

Разница между свойством opacity и RGBA заключается в том, что свойство opacity применяет прозрачность ко всему элементу целиком, то есть все содержимое элемента становится прозрачным. А RGBA позволяет задать прозрачность отдельным частям элемента (например, только тексту или фону):

Body { background-image: url(img.jpg); } .prim1 { width: 400px; margin: 30px 50px; background-color: #ffffff; border: 1px solid black; font-weight: bold; opacity: 0.5; filter: alpha(opacity=70); /*для IE8 и более ранних версий*/ text-align: center; } .prim2 { width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px solid black; font-weight: bold; text-align: center; } Попробовать »

Примечание: значения RGBA не поддерживаются в браузере IE8 и более ранних версиях. Для объявления резервного варианта цвета для старых браузеров, не поддерживающих значения цветов с альфа-каналами, следует указать его первым до значения RGBA: background: rgb(255,255,0); background: rgba(255,255,0,0.5);

На этом уроке мы с вами разберем такие CSS свойства – opacity и RGBA . Свойство Opacity отвечает только за прозрачность элементов, а функция RGBA – за цвет и прозрачность, если указать значение прозрачности альфа-канала.

CSS прозрачность Opacity

Цифровое значение для opacity задано в пределах от 0.0 до 1.0, где ноль это полная прозрачность, а единица наоборот - абсолютная непрозрачность. Например, для того, чтобы увидеть 50% прозрачности, надо выставить значение в 0.5. Надо иметь ввиду, что opacity распространяется на все дочерние элементы родителя. А это значит, что и текст на полупрозрачном фоне, тоже будет полупрозрачным. А это уже очень существенный недостаток, текст не так хорошо выделяется.

На скриншоте отчётливо видно, что черный текст стал таким же полупрозрачным, как и голубой фон.

Div {
background: url(images/yourimage.jpg); /* Фон картинка */
width: 750px;
height: 100px;
margin: auto;
}
.blue {
background: #027ав4; /* Цвет полупрозрачного фона */
opacity: 0.3; /* Значение полупрозрачности фона */
height: 70px;
}
h1 {
padding: 6px;
font-family: Arial Black;
font-weight: bolder;
font-size: 50px;
}

CSS прозрачность в формате RGBA

Формат для записи цвета RGBA , является более современной альтернативой для свойства opacity . R (red), G (green), B(blue) – значит: красный, зеленый, синий. Последняя буква A – означает альфа-канал, который и задает прозрачность. RGBA в отличии от Opacity не влияет на дочерние элементы.

Теперь давайте рассмотрим наш пример с использованием RGBA . Заменим эти строчки в стилях.

Background: ##027ав4; /* Цвет фона */
opacity: 0.3; /* значение полупрозрачности фона */

на следующую одну строку

Background: rgba(2, 127, 212, 0.3);

Как вы видите значение прозрачности 0.3 совпадает у обоих методов.

Результат примера с RGBA:

Второй скриншот намного лучше смотрится, чем первый.

Играясь с полупрозрачностью фона блоков, можно добиться на сайте интересных эффектов. Важно, чтобы эти полупрозрачные блоки шли поверх пестрого рисунка, например фотографии. Только в этом случае эффект будет заметен. Этот прием уже давно применялся в дизайне, ещё до появления всяких CSS3 , реализовывался он чисто в графических программах.

Если заказчик требует, чтобы верстка хорошо смотрелась и в старых версиях браузера Internet Explorer , тогда добавляйте свойство filter и не забудьте закомментировать, чтобы не пострадала валидность кода.

Вывод

Формат RGBA поддерживают все современные браузеры, за исключением Internet Explorer . Ещё очень важно, что RGBA гибок, он действует только на конкретный заданный элемент, не затрагивая дочерних. Понятно, что для верстальщика это удобнее. Мой выбор однозначно в пользу формата RGBA для получения прозрачности в CSS .

Для лучшего закрепления материала и большей наглядности, предлагаю вам пройти .

Всем привет. Как вы возможно знаете, background – это css-свойство, которое позволяет задать цвет фона или загрузить изображение, которое будет выступать в качестве фонового. В CSS3 также появилась возможность создания линейных и радиальных градиентов, но это тема для отдельной статьи. В этой же я хотел рассказать, как в css у свойства background задать прозрачность.

Задаем прозрачность у css background

Итак, все это делается очень просто благодаря такому формату записи цвета, как rgba . Если вы работаете с графическими редакторами, то наверняка знаете, что цветовой режим rgb расшифровывается так: доля красного цвета (red), доля зеленого (green) и синего (blue). Так вот, rgba практически тоже самое, только добавляется еще один параметр – прозрачность. Записывается так:

Background-color: rgba(173, 57, 22, 0.5)

Сначала мы явно указываем, что задаем цвет в режиме rgba. Потом указываем значения насыщенности трех основных цветов от 0 до 255, где 255 – наибольшая насыщенность. Четвертый параметр это и есть наша прозрачность. Здесь пишется значение от 0 до единицы. 1 – полностью непрозрачный элемент, а 0 – полностью прозрачный. Соответственно, если выставить 0, то фонового цвета не будет видно вообще.

Теперь вы знаете, как в css у свойства background задать прозрачность. Для этого нужно использовать цветовой режим rgba. Есть еще свойство opacity , но оно применяется ко всему элементу в целом. То есть при применении opacity прозрачность может примениться и к тексту, что сделает его нечитаемым.

Прозрачный фон на примере

Преимущества полупрозрачного фона легко показать на примере. Например, у нас есть общий фон страницы. Вот так бы выглядел блок, если бы ему был задан сплошной черный цвет:

А теперь зададим этот же черный цвет блоку, но укажем его с помощью цветового формата rgba, указав последнее значение в 0.7, например. Получится так:
Теперь фон блока просвечивается и через него видно фоновую картинку. Данная картинка и фон приведены лишь для примера. Как вы понимаете, в css background прозрачность может пригодиться, когда вам надо, чтобы фон вложенного элемента просвечивался, не закрывая другие фоны, расположенные в других слоях.

Сам цвет задавать с помощью rgba не сложно. Как уже и говорилось — первые три буквы означают три основных цвета: красный, зеленый и синий, а точнее их долю (от 0 до 255). Прописывая разные значения можно получать миллионы разных цветов, а полупрозрачность позволит вам придумать еще массу красивых эффектов для сайта, если это нужно будет.

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%.

Пример кода:

Вот результа размещенного выше кода:

Всех приветствую. Сегодня я расскажу, как задать в css прозрачный цвет. На текущий момент для этого есть 3 способа.

Способ 1 — значение transparent

Если вы зададите в качестве значения цвету текста или фона значение transparent , то цвет будет полностью прозрачным, то есть невидимым. Пример:

Color: transparent;

Такой текст нельзя будет увидеть на странице.

Способ 2 — цветовой режим rgba

А это уже нововведение css3. Ранее в веб-разработке такого режима не было, был только rgb. Наверняка вы знаете, как записывать цвет в этом формате. Для этого вам нужно в скобках указать три значения от 0 до 255, указывающие на насыщенность одного из трех основных цветов (красный, зеленый, синий). Например:

Background: rgb(230, 121, 156);

Формат rgba ничем не отличается, только добавляется четвертое значение — степень прозрачности элемента от 0 до 1. Вообще этот формат записи в основном используют, чтобы задать полупрозрачный цвет, а не полностью прозрачный. Чтобы достичь полной прозрачности, нужно всего лишь в качестве четвертого значения написать 0.

Background: rgba(0, 0, 0, 0);

В таком случае остальные 3 цифры особой роли не играют.

Полупрозрачный же цвет можно задать, если в качестве четвертого параметра задать значение от 0.01 до 0.99. О уже писал немного о задании полупрозрачности фону в этой статье , можете ознакомиться, если интересно.

Способ 3 — opacity

Еще одно свойство из технологии css3. Но я хочу вас сразу предупредить, что оно работает немного по-другому. С помощью opacity прозрачность задается всему блоку, к которому оно применяется. Таким образом, ухудшается читабельность текста и восприятие картинок. Так что свойство я вижу смысл применять только для блоков, в которых нет текста и какой-то иной информации. Значения можно задавать от 0 до 1, как и в случае с четвертым параметром при задании цвета в формате rgba .

В общем-то, на данный момент это все известные мне способы задания прозрачного цвета в css. Зачем это нужно, это уже другой вопрос. Через прозрачный фон может быть видно то, что находится под ним. Иногда так нужно сделать по дизайну. В целом, прием с полупрозрачностью сегодня очень распространен.

Надеюсь, вы запомните и воспользуетесь для себя каким-нибудь из этих трех способов. А у меня на этом все.