AtoZ CSS屏幕录像：CSS Opacity属性

Loading the player…

正在加载播放器…

This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.

该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。

成绩单 (Transcript)

The opacity property specifies how opaque an element is.

opacity属性指定元素的opacity 。

It takes a value ranging from 0 to 1 where 0 is completely transparent and 1 is completely opaque.

它的取值范围是0到1，其中0是完全透明的，而1是完全不透明的。

In this practical episode, we’ll look at how the opacity property works, including some of it’s downsides – and then create a CSS only fading slideshow using opacity and what we learned in “Episode 11: keyframe animations“.

在这个实用的小插曲中，我们将查看opacity属性的工作原理，包括它的一些缺点-然后使用opacity以及我们在“ 第11集： keyframe动画 ”中学到的内容创建仅CSS淡入淡出的幻灯片。

opacity (opacity)

a img {
  opacity:1;
}

I have a linked image here with opacity set to 1. This is the default and makes the image completely opaque. Setting a value of 0 makes it completely transparent but does maintain its position in the document. Setting any value between 0 and 1 makes it semi-transparent.

我在这里有一个链接图像，其opacity设置为1。这是默认设置，它使图像完全不透明。 设置为0使其完全透明，但不会保留其在文档中的位置。 在0到1之间设置任何值都会使其半透明。

When setting opacity to anything other than 1, a new stacking context is created which places the semi-transparent element on a new layer. As such, the background on the element beneath is partially visible.

将opacity设置为1以外的任何值时，将创建一个新的堆叠上下文，该上下文将半透明元素放置在新层上。 因此，下面元素的background是部分可见的。

I like to use this effect to give some visual feedback for hovering over images that are links. opacity is a property that can be animated, and by adding a transition to the image, the effect is a nice subtle fade.

我喜欢使用此效果为悬停在链接的图像上提供一些视觉反馈。 opacity是可以设置动画的属性，通过向图像添加过渡效果，效果可以达到很好的微妙褪色效果。

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

不透明度和内容 (Opacity and content)

When applying opacity to an element that contains other content, the child elements also appear semi-transparent, regardless of any opacity value set on them.

将opacity应用于包含其他内容的元素时，子元素也将显示为半透明，而不管其上设置的任何opacity值。

If I wanted to create a box with a semi-transparent background, opacity would make the box and all its contents semi-transparent. The best thing to use in this case would be a background colour set in rgba which we looked at in “Episode 3: CSS Color Syntax“.

如果我想创建一个半透明背景的盒子， opacity会使该盒子及其所有内容都是半透明的。 在这种情况下，最好使用的是rgba中设置的背景颜色，我们在“ 第3集：CSS颜色语法 ”中进行了介绍 。

幻灯片放映 (Slideshow)

As opacity can be animated, let’s look at how we can make a slideshow using a series of keyframes that just manipulate the opacity of a set of images.

由于可以对opacity进行动画处理，因此让我们看一下如何使用一系列keyframes来制作幻灯片，这些keyframes仅操纵一组图像的opacity 。

I have a container with 5 images inside it. Each one has a numeric class which will be used to create 5 different animation timings.

我有一个装有5张图片的容器。 每个动画都有一个数字类，它将用于创建5个不同的动画时间。

<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>

The slides are stacked on top of each other by setting position:relative on the slide-container and position:absolute on the images inside it.

通过在slide-container设置position:relative和在slide-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;}
}

For the keyframes, we want each image to be visible for 1/5 of the time. For the first image, this can be achieved by having it fade from opacity: 0 to opacity: 1 over the first 0% of the animation and then remain opaque for another 10% before fading out to 0 again.

对于keyframes ，我们希望每个图像在1/5的时间内可见。 对于第一个图像，可以通过在动画的前0％处使它从不opacity: 0渐变为opacity: 0 opacity: 1 ，然后再保持10％不透明，然后再次淡入0来实现。

To set up the keyframes for each other the other images, we could copy and paste the block of code we’ve already created but a tidier way of doing it would be to use the animation-delay property to offset when each animation starts by 1/5 of the total duration – this is the time that the first slide will be visible before it starts to fade out.

要为其他图像彼此设置keyframes ，我们可以复制并粘贴已经创建的代码块，但是一种更简洁的方法是使用animation-delay属性在每个动画以1开始时进行偏移总持续时间的/ 5 –这是第一张幻灯片开始淡出之前可见的时间。

Duplicating the animation declaration for slides 2-5 and increasing the animation-delay value in 4 second increments, completes the effect.

复制幻灯片2-5的动画声明，并以4秒的增量增加animation-delay值，即可完成效果。

Not bad for a few lines of CSS, eh?

对于几行CSS来说还不错，是吗？

翻译自: https://www.sitepoint.com/atoz-css-screencast-opacity/