Форум сайтостроителей

opacity

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.
div {
  opacity: 1;
}

Краткая информация

Значение по умолчанию1
НаследуетсяНет
ПрименяетсяКо всем элементам
АнимируетсяДа
opacity: <число>

Значения

В качестве значения выступает число из диапазона [0.0; 1.0]. Значение 0 соответствует полной прозрачности элемента, 1, наоборот — его непрозрачности. Дробные числа вида 0.6 устанавливают полупрозрачность. Допускается писать числа без нуля впереди, вида opacity: .6.

Прозрачность opacity или rgba | CSS

Для того, чтобы через блок просвечивал нижний слой, нужно изменить значение свойства opacity с 1 до 0 или последнюю цифру функции rgba.

opacity
rgba
прозрачность
<style>
.opacity {
  font-size: 5em;
  line-height: 3em;
  text-align: center;
  opacity: ;
  background: rgba(255,245,215,);
} 
</style>

<div class="opacity">прозрачность</div>
opacity влияет на весь блок, включая текст. Создаёт новый контекст наложения. Дочерние теги не могут быть ярче родительского элемента.
rgba влияет только на конкретное свойство. В данном случает позволяет видеть сквозь фон и не делает текст прозрачным.

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !