Скриншот AtoZ CSS: свойство непрозрачности CSS

Этот скринкаст является частью нашей серии CSS AtoZ. Вы можете найти другие записи серии здесь .

расшифровка

Свойство opacity

Он принимает значение в диапазоне от 0 до 1, где 0 является полностью прозрачным, а 1 — полностью непрозрачным.

В этом практическом эпизоде ​​мы рассмотрим, как работает свойство opacityopacity« Эпизоде ​​11: анимация keyframe ».

opacity

 a img {
  opacity:1;
}

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

При установке opacity Таким образом, background

Мне нравится использовать этот эффект, чтобы дать некоторую визуальную обратную связь при наведении на изображения, которые являются ссылками. opacity

 a img {transition:0.3s;}
a:hover img {opacity:0.75;}

Непрозрачность и содержание

При применении opacity

Если бы я хотел создать коробку с полупрозрачным фоном, opacity В этом случае лучше всего использовать цвет фона, заданный в opacity« Эпизоде ​​3: Синтаксис цвета CSS » .

Слайд-шоу

Поскольку rgbaopacitykeyframes

У меня есть контейнер с 5 изображениями внутри. Каждый из них имеет числовой класс, который будет использоваться для создания 5 различных временных интервалов анимации.

 opacity

Слайды накладываются друг на друга, устанавливая <div class="slide-container">
<img class="slide1" src="http://www.placekitten.com/800/400">
<img class="slide2" src="http://www.placekitten.com/800/500">
<img class="slide3" src="http://www.placekitten.com/700/600">
<img class="slide4" src="http://www.placekitten.com/800/400">
<img class="slide5" src="http://www.placekitten.com/800/500">
</div>position:relativeslide-container

 position:absoluteнаправо .slide-container {
  position: relative;
  height: 400px;
  overflow: hidden;
}
.slide-container img {position: absolute; top:0; left:0; opacity:0;}
.slide1 {animation: fade 20s infinite;}
.slide2 {animation: fade 20s 4s infinite;}
.slide3 {animation: fade 20s 8s infinite;}
.slide4 {animation: fade 20s 12s infinite;}
.slide5 {animation: fade 20s 16s infinite;} 

@keyframes fade {
  0%   {opacity: 0;}
  10%  {opacity: 1;}
  20%  {opacity: 1;}
  30%  {opacity: 0;}
  40%  {opacity: 0;}
  50%  {opacity: 0;} 
  60%  {opacity: 0;}
  70%  {opacity: 0;}
  80%  {opacity: 0;}
  90%  {opacity: 0;}
  100% {opacity: 0;}
}

Для keyframes Для первого изображения это может быть достигнуто за счет того, что оно затухает от opacity: 0opacity: 1

Чтобы настроить keyframesanimation-delay

Дублирование объявления анимации для слайдов 2-5 и увеличение значения animation-delay

Неплохо для нескольких строк CSS, а?