Свойство CSS opacity отвечает за прозрачность элементов (картинки, текста, блоки) в html.

Синтаксис CSS opacity

Где value может принимать вещественные значения в диапазоне от 0.0 до 1.0. Значение 1.0 — означает, что прозрачность отсутствует (по умолчанию).

Пример №1. Прозрачное изображение в html

Первая картинка выведена без прозрачности, вторая с прозрачностью 0.5

.primer1{ padding: 5px; opacity: 0..jpg»>

Пример №2. Эффекты с прозрачностью в html

По умолчанию блок частично прозрачный. При наведении курсора мыши блок становится ярким. Такие эффекты зачастую используются в дизайне сайтов.

.primer2{ padding: 5px; opacity: 0.5; } ..jpg»>

На странице преобразуется в следующее

Пример №3. Прозрачный блок на изображении в html

Ниже приведен пример полупрозрачного блока, который частично закрыл изображение. Блок специально накрывает изображение не полностью с целью показать, как он выглядит на пустом фоне.

.primer3{ padding: 5px; opacity: 1; } .block3{ width: 100px; height: 100px; background: #1E90FF; margin: 0px 0px -60px 80px; border: 1pxsolid #000; opacity: 0..jpg»>

На странице преобразуется в следующее

Примечание
Internet Explorer до версии 9.0 для изменения прозрачности использует фильтры, для этого браузера следует записать filter: alpha(opacity=50), где параметр opacity может принимать значение от 0 до 100.

Для обращения к opacity из JavaScript нужно писать следующую конструкцию:

object.style.opacity=»VALUE»

Читайте также:
. text-shadow
. Свойство zoom
. Отступы padding
. Отступы margin
. Как сделать рамку элементов border
. Как сделать фон на сайте html
. Как сделать анимацию в html
. Как сделать линейный градиент
. Радиальный градиент CSS

← Перейти в каталог CSS уроков

CSS прозрачность (Opacity vs RGBA)

На этом уроке мы с вами разберем такие CSS свойства – opacity и RGBA .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

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

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

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Прозрачность opacity или rgba | CSS Прозрачность в CSS

Средствами CSS можно задать прозрачность двумя способами.С помощью свойства opacity или свойства rgba.

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

Синтаксис

Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).

К примеру нам надо, чтобы наша картинка была на половину прозрачной

Добавляем стили

Но к сожалению еще не все браузеры поддерживают opacity. Для полной кроссбраузерности применяем:

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); - для ИЕ версии выше 5.5-7 прозрачность реализуется с помощью фильтра Alpha DirectX. Значение задается в диапазоне от 0 до 100. Сокращенный (не рекомендуемый) вариант - filter: alpha(opacity=50);

-moz-opacity - для старых версий Mozilla (1.6 и ниже) и Firefox (до 1.6)

-khtml-opacity - для Safari 1.1 и Konqueror 3.1

Так же на IE может не работать если не указаны width (ширина) или height (высота).

Свойство RGBA позволяет задать фоновый цвет с альфа-каналом. Альфа-канал определяет прозрачность элемента.

Значение 0 соответствует полной прозрачности, 1 - непрозрачности, а промежуточное значение вроде 0.5 - полупрозрачности.

Синтаксис

Допустим, нам нужен текст с прозрачным фоном.

Отличия opacity от rgba

opacity влияет на весь блок, включая текст. Создаёт новый контекст наложения. Дочерние теги не могут быть ярче родительского элемента.

rgba влияет только на конкретное свойство. В данном случает позволяет видеть сквозь фон и не делает текст прозрачным.

CSS: Прозрачность Прозрачность картинки

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

Браузер IE8 и более ранние его версии поддерживают альтернативное свойство — , где «» может принимать значение от до, чем меньше значение, тем прозрачнее будет элемент.

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

Название документа .myClass { float: left; margin-right: 5px; opacity: 0..jpg» class=»myClass»> Попробовать »

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

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

Название документа img { float: left; margin-right: 5px; opacity: 0.4; filter: alpha(opacity=40); /*для IE8 и более ранних версий*/ } img:hover { opacity: 1..jpg»> Попробовать »

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

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

Возможно вы уже знакомы с моделью представления цвета в формате.

Свойство CSS opacity

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

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

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

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

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

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

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; } Попробовать »

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

Статьи / CSS /

Как сделать элемент прозрачным и убрать прозрачность CSS?

1. Как сделать элемент прозрачным?
2. Как убрать прозрачность дочернего элемента?
3. Пример

Для того, чтобы сделать элемент прозрачным, следует использовать CSS.

CSS прозрачность – просто о важном

Для стилей есть полезное свойство opacity, в котором остаётся лишь указать степень прозрачности. Где, как правило 1 или 100 — элемент не прозрачен, а 0.1 или 10 — это прозрачный элемент. Почему два значения? Потому что для IE (Internet Explorer), равно как и для других браузеров, прописываются другие свойства, и у IE прозрачность измеряется в других значениях.

Полупрозрачный элемент

Соответственно, чтобы сделать элемент полупрозрачным, нужно задать для opacity значение 0.5 или 50.

Код CSS

Как убрать прозрачность дочернего элемента?

Например, Вы задали прозрачность всем пунктам меню, а при навведении как раз хотите сделать НЕ прозрачным (убрать прозрачность) , то прописываете ему следующие характеристики, где значение прозрачности равно 1 или 100:

Код CSS

filter:alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity:1;
opacity: 1;
Не забываем указывать все 4 свойства, так как в противном случае действие будет не кроссбраузерно, то есть будет работать не во всех браузерах.

Если хотите, чтобы полупрозрачность были при наведении на изображение, то можно создать, например такой класс

Opacity:hover {
filter:alpha(opacity=50); /* для IE 5.5+ */
-moz-opacity:0.5; /* для Mozilla 1.6 и ниже */
-khtml-opacity:0.5; /* для Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
}

Рассмотрим пример

Создаём файл index.html

Название странички

.opacity:hover {
filter:alpha(opacity=50); /* для IE 5.5+ */
-moz-opacity:0.5; /* для Mozilla 1.6 и ниже */
-khtml-opacity:0.5; /* для Konqueror 3.1, Safari 1.1 */
opacity: 0.5; /* для Mozilla 1.7b+, Firefox 0.9+, Safari 1.2+, Opera 9 */
}

Square {
width: 100px;
height: 100px;
background: black;
}

Полупрозрачность элемента
Делаем изображение полупрозрачным при наведении!

ДемонстрацияСкачать исходники

Спасибо за внимание!

Следующая статья
Как создать div блок с прокруткой?

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

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

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

Прозрачность через CSS 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 . Заменим эти строчки в стилях.

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

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

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

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

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

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

.blue {
background: rgba(0, 120, 201, 0.3);
filter: alpha(Opacity=30); /* Прозрачность в IE */
}

Вывод

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

Для управления прозрачностью элементов страницы используется свойство 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.

orem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry"s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using "Content here, content here", making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for "lorem ipsum" will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

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

Ну для начала уясним что документ у нас имеет не только одну плоскость монитора - он вообще говоря 3х мерный, об этом я упоминал в статье "Z-index ". Соответственно даже совершенно прозрачный слой, окажись он на верху стека отображения, перекроет доступ к остальным элементам. В этом одно из главных применений прозрачных блоков. Несомтря на то, что обычно используется эффект затенения, полностью прозрачный слой будет работать точно так же. Так, например, работает очень много популярных фото-галерей, организуется затененный слой в котором отбражаются фото, и элементы управления ими. Все остальное пространство страницы оказывается "накрыто" (полу)прозрачным слоем, закрывающим доступ ко всем другим элементам на странице. Т.е. уйти со страницы, нажав на ней какую-либо ссылку не получится - весь текст закрыт подложкой. Чтобы вернуться к телу сайта обычно предусматривают элементы управления для закрытия галереи, формы входа и т.п. Управляют показом/скрытием прозрачных блоков с помощью javascript. Здесь к сожалению альтернативы ему нет. Без его использования пользователь либо вообще не увидит прозрачного блока, либо не сможет его закрыть, не уйдя с текущей страницы. Отмечу, что используются для этого свойства visibility или display.

Так как, собственно организуется прозрачность в html? Настройка прозрачности элементов вообще говоря не входит в спецификацию CSS, потому приходится использовать сразу несколько инструкций для ее создания. Одни браузеры (ie) будут работать с одним вариантом, вторые с другим. Ie использует встроенную функциональность filter, другие браузеры используют свойство "opacity", которое задается в интервале от 0(полностью прозрачный объект) до 1(полная непрозрачность). Для примера в случае с 30% прозрачностью следует писать "opacity:0.30; filter:alpha(opacity=30); ". Свойства как видно из примера схожи - только в первом случае используется число от 0 до 1, во втором процентная запись. Пример такого блока:

Для начинающих