Прозрачность CSS (Прозрачность)

Свойство opacity CSS определяет прозрачность элемента. Свойство opacity определяет прозрачность элемента. Иначе говоря, свойство opacity определяет степень покрытия фона элемента.

Кросс-браузерная прозрачность

Теперь прозрачность (opacity) является частью спецификации CSS3, но она существовала уже давно. Однако, более старые браузеры имеют различные способы指定 непрозрачности или прозрачности.

CSS непрозрачность в Firefox, Safari, Chrome, Opera и IE9

Это самая последняя грамматика CSS непрозрачности во всех текущих браузерах.

p {
　　　　opacity: 0.7;
}

Этот стиль правила сделает элемент абзаца на 70% непрозрачным (или на 30% прозрачным).

Значение свойства opacity варьируется от 0.0 до 1.0. Установка opacity: 1; делает элемент полностью непрозрачным (т.е. 0% прозрачности), а opacity: 0; делает элемент полностью прозрачным (т.е. 100% прозрачности).

Метод реализации CSS прозрачности в Internet Explorer 8 и более ранних версиях

Internet Explorer 8 и более ранние версии поддерживают только Microsoft-свойство «фильтр alpha» для указания прозрачности элементов.

p {
　　　　filter: alpha(opacity=50);
　　　　zoom: 1; /* Коррекция для IE7 */
}

CSS-прозрачность, совместимая со всеми браузерами

Сочетание вышеупомянутых двух шагов позволит вам получитьвсе браузерыдлякод.

p {
　　　　opacity: 0.5; /* Прозрачность для современных браузеров */
　　　　filter: alpha(opacity=50); /* Прозрачность для IE8 и более ранних версий */
　　　　zoom: 1; /* Коррекция для IE7 */
}

CSS-прозрачность изображений

Вы также можете использовать CSS Opacity для создания прозрачных изображений.

Три изображения на следующем рисунке взяты из одного и того же источника. Единственное различие между ними — это их прозрачность.

Изменение прозрачности изображения при наведении мыши

Ниже приведен пример использования CSS-прозрачности для изображений, где при перемещении указателя мыши на изображение его прозрачность изменяется.

— переместите указатель мыши на изображение, чтобы увидеть эффект.

Текст в прозрачной рамке

Когда вы используете непрозрачность на элементе, не только его фон становится прозрачным, но и все его подэлементы также становятся прозрачными. Если значение непрозрачности увеличивается, текст внутри прозрачного элемента становится труднее читать.

Чтобы предотвратить это, вы можете использовать прозрачные PNG-изображения или поместить блок текста снаружи прозрачного прямоугольника, а затем использовать негативмаржиналилиCSS-позиционированиеВизуально推ить его внутрь.

div {
　　　　float: left;
　　　　opacity: 0.7;
　　　　border: 1px solid #949781;
}
p {
　　　　float: left;
　　　　position: relative;
　　　　margin-left: -400px;
}

Использование CSS-прозрачности RGBA

За исключением RGB, CSS3 ввел новый метод RGBA для указания цвета, который включает в себя альфа-прозрачность как часть значения цвета. RGBA означает Red, Green, Blue, Alpha.

Объявление RGBA — это очень простой способ установить прозрачность цвета.

div {
　　　　background: rgba(200, 54, 54, 0.5);
}
p {
　　　　color: rgba(200, 54, 54, 0.25);
}

Первые три числа представляют собой значения RGB (красный (0-255), зеленый (0-255), синий (0-255)), а четвертое число представляет собой значение alpha-прозрачности между 0 и 1 (0 делает цвет полностью прозрачным, а значение 1 делает его完全不 прозрачным).

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

— или не учитывать цвет текста, только изменить прозрачность фона.

Вы увидите, как легко можно определить отдельный цвет с помощью RGBA, а не прозрачность всего элемента. Однако, всегда рекомендуется определить резервное цветовое объявление для браузеров, которые не поддерживают цвета RGBA.

Резервное цветовое объявление RGBA

Все браузеры не поддерживают цвета RGBA. Однако, вы можете предложить другие варианты для браузеров, которые не поддерживают RGBA, такие как сплошные цвета или прозрачные PNG-изображения.

p {
　　　　/* Замена для веб-браузеров, которые не поддерживают RGBA */
　　　　background: rgb(0, 0, 0);
　　　　/* RGBa с опacité 0.5 */
　　　　background: rgba(0, 0, 0, 0.5);
}