CSS3背景图片透明叠加属性cross-fade简介

据说iOS6系统(iPhone5)增加了两个CSS3属性,一个是CSS3 filters – CSS3滤镜,在“CSS将图片转换成黑白”一文中就介绍过CSS3 grayscale滤镜;另外一个是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> )

两个图片地址,外加一个透明度百分比。

这个percentage是作用在第二张图片上的,可以让后面一站图片(2.jpg)半透明,然后产生图片透明度叠加效果。类似这样的:
CSS3 cross-fade产生的效果截图 张鑫旭-鑫空间-鑫生活

有个疑问?交叉淡入淡出效果中的透明度是两张图片都作用?还是仅作用于后面一张??

对此,我专门制作了一个测试demo,您可以狠狠地点击这里:CSS3 cross-fade属性透明度作用对象测试

cross-fade与opacity作用对比效果测试 张鑫旭-鑫空间-鑫生活

上面效果使用的是cross-fade, 后面效果是通过修改后一张图片的opacity透明度值实现。可以看到,在相同的透明度上,两者的效果是一样的。因此可以得出:cross-fade中的透明度值是只作用于后面一张图片上!

兼容性
目前,仅Chrome以及Safari 6支持该CSS3属性;IE10以及FireFox浏览器是否支持该属性还不得而知。

因此,本文的内容纯当扩充眼界,增加见识。基本上无法再实际项目中应用。

结语
好久没有些这么短的文章了,祝大家中秋国庆快乐,玩得好,吃得好,安安全全,健健康康!!

最后,和平使者爱凸鳗压阵:

原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活[http://www.zhangxinxu.com]
本文地址:http://www.zhangxinxu.com/wordpress/?p=2671

(本篇完)

分享到:

标签: , , , , , ,

赞助商推荐(我也要赞助)

想学到点真东西? ×
如果你有1~3年前端开发经验,不妨 ×


发表评论(目前8 条评论)

  1. 锐风说道:

    博主对 “半透明” 这个概念的认识不清楚, 其实不存在 “只作用在一张图片上” 这种说法.
    把问题简化一下, 不是两个图片叠加, 而是两个像素点叠加的话, 假定:
    1. 上面的像素点为 T=rgb(200, 200, 200), 下面的像素点为 B=rgb(100, 100, 100), T 的不透明度为 75%, 那么叠加后的颜色为: 200×75%+100×25%=175 即 rgb(175, 175, 175);
    2. 交换一下 T 和 B 的颜色, T=rgb(100, 100, 100), B=rgb(200, 200, 200), T 的不透明度为 75%, 那么叠加后的颜色为: 100×75%+200×25%=125 即 rgb(125, 125, 125).
    这两个例子说明, 两个像素点叠加后的颜色是两个颜色分别乘对应系数相加得到的, 所以不是只处理单一的颜色(图片). 博主可以用 Photoshop 验证一下.
    opacity 是 “不透明度”, 而不是 “透明度”. 因为值为 100% 的时候为完全不透明.

    • waiting_hao说道:

      在现实世界中,这种效果就是“只作用在一张图片上”,如果你要较真,屏幕根本就没有透明可言。

  2. noyobo说道:

    为什么把 张含韵换了

  3. _t说道:

    @Alex 我试着把 IE 10 文档模式改为 IE9 标准没效果啊。。。opacity 倒是可以。。。IE 10 估计不支持 cross-fade 了。。。

  4. Alex说道:

    为什么我的ie9支持这个效果,难道穿越了?

  5. rocman说道:

    年轻人,我腾讯的,老大分配了个招人的任务给我,刚好今天就看到你博客了,猿粪啊,来不来不?(欢迎用邮箱地址找我~~~,原先的邮箱地址错了,这个才算数~~~)

  6. vincent_ds说道:

    demo链接点不了…