Средствами CSS можно задать прозрачность двумя способами.С помощью свойства opacity или свойства rgba.
Opacity – Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.
Синтаксис
opacity: значение
Степень прозрачности задается в диапазоне 0 (полностью прозрачен) до 1 (полностью не прозрачен).
К примеру нам надо, чтобы наша картинка была на половину прозрачной
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Прозрачность
</title>
</head>
<body>
<img src="image.jpg" class="img1">
</body>
</html>
Добавляем стили
CSS
.img1 {
Opacity: 0.5; /* Полупрозрачность элемента */
}
Но к сожалению еще не все браузеры поддерживают 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
CSS
img1{
filter:progid:DXImageTransform.Microsoft.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; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
}
Так же на IE может не работать если не указаны width(ширина) или height(высота).
RGBA
Свойство RGBA позволяет задать фоновый цвет с альфа-каналом. Альфа-канал определяет прозрачность элемента.
Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.
Синтаксис
rgba: значение
Допустим, нам нужен текст с прозрачным фоном.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Прозрачность</title>
</head>
<body>
<p class="rgba">Наш текст</p>
</body>
</html>
CSS
body {
background-image: url(https://g.io.ua/img_aa/large/3228/01/32280132.jpg)
}
.rgba {
font-size: 50px;
color: rgb(0, 0, 0);
background-color: rgba(256,256,256, 0.5);
width: 300px;
}
Отличия opacity от rgba
opacity влияет на весь блок, включая текст. Создаёт новый контекст наложения. Дочерние теги не могут быть ярче родительского элемента.
rgba влияет только на конкретное свойство. В данном случает позволяет видеть сквозь фон и не делает текст прозрачным.