Прозрачность в CSS

Средствами 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

Читайте также:  Как использовать архиватор tar

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock detector