css3情况照片全透明叠加特性cross

2021-03-10 18:09 jianzhan

听说iOS6系统软件(iPhone5)提升了两个CSS3特性,1个是CSS3 filters – CSS3滤镜,在“CSS将照片变换成黑与白”1文中就详细介绍过CSS3 grayscale滤镜;此外1个是CSS3 Cross-fade – CSS3交叉式淡入淡出。

终究有IE滤镜这厮,因此前者看上去将会不那末显生;那后者Cross-fade是?

用法案例
用法以下:

拷贝编码
编码以下:

background-image: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%);

官方草案表述式为:

拷贝编码
编码以下:

<image-combination> = cross-fade( <image>, <image>, <percentage> )

两个照片详细地址,外加1个全透明度百分比。

这个percentage是功效在第2张照片上的,可让后边1站照片(2.jpg)半全透明,随后造成照片全透明度叠加实际效果。相近这样的:

有个疑惑?交叉式淡入淡出实际效果中的全透明度是两张照片都功效?還是仅功效于后边1张??

上面实际效果应用的是cross-fade, 后边实际效果是根据改动后1张照片的opacity全透明度值完成。能够看到,在同样的全透明度上,二者的实际效果是1样的。因而能够得出:cross-fade中的全透明度值是只功效于后边1张照片上!

适配性
现阶段,仅Chrome和Safari 6适用该CSS3特性;IE10和FireFox访问器是不是适用该特性还不可而知。

因而,本文的內容纯当扩充见识,提升眼界。基础上没法再具体新项目中运用。

结语
好长时间沒有些这么短的文章内容了,祝大伙儿中秋国庆开心,玩得好,吃得好,安安全性全,健康快乐!!

最终,友谊使者爱凸鳗压阵: