Прозрачность в 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

Читайте также:  Как установить LAMP сервер на Ubuntu 16.04

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

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

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

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

Adblock detector