This screencast is a part of our AtoZ CSS Series. You can find other entries to the series here.
该截屏视频是我们的AtoZ CSS系列的一部分。 您可以在此处找到该系列的其他条目。
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淡入淡出的幻灯片。
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;}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颜色语法 ”中进行了介绍 。
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/
