Средствами 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 влияет только на конкретное свойство. В данном случает позволяет видеть сквозь фон и не делает текст прозрачным.