本文共 4646 字,大约阅读时间需要 15 分钟。
This screencast is a part of our AtoZ CSS Series. You can find other entries to the series .
该截屏视频是我们的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 ““.
在这个实用的小插曲中,我们将查看opacity
属性的工作原理,包括它的一些缺点-然后使用opacity
以及我们在“ ”中学到的内容创建仅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;}
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 ““.
如果我想创建一个半透明背景的盒子, opacity
会使该盒子及其所有内容都是半透明的。 在这种情况下,最好使用的是rgba
中设置的背景颜色,我们在“ ”中进行了介绍 。
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个不同的动画时间。
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来说还不错,是吗?
翻译自:
转载地址:http://tzrgb.baihongyu.com/