css3背景图片透明叠加属性cross-fade简介及用法实例


Posted in HTML / CSS onJanuary 08, 2013

据说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简介及用法实例

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

css3背景图片透明叠加属性cross-fade简介及用法实例

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

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

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

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

最后,和平使者爱凸鳗压阵:
css3背景图片透明叠加属性cross-fade简介及用法实例

HTML / CSS 相关文章推荐
一款利用html5和css3实现的3D立方体旋转效果教程
Apr 26 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
CSS3改变浏览器滚动条样式
Jan 04 HTML / CSS
CSS3.0实现霓虹灯按钮动画特效的示例代码
Jan 12 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
html5构建触屏网站之网站尺寸探讨
Jan 07 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
Dec 05 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
Dec 04 HTML / CSS
纯CSS3编写的的精美动画进度条(无flash/无图像/无脚本/附源码)
Jan 07 #HTML / CSS
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
Jan 06 #HTML / CSS
css3 旋转按钮 使用CSS3创建一个旋转可变色按钮
Dec 31 #HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 #HTML / CSS
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
Dec 28 #HTML / CSS
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
Dec 28 #HTML / CSS
CSS3支持IE6, 7, and 8的边框border属性
Dec 28 #HTML / CSS
You might like
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
PHP中__FILE__、dirname与basename用法实例分析
2014/12/01 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
PHP 数组遍历foreach语法结构及实例
2016/06/13 PHP
Symfony2针对输入时间进行查询的方法分析
2017/06/28 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
PHP快速排序算法实现的原理及代码详解
2019/04/03 PHP
基于PHP实现邮箱验证激活过程详解
2020/10/28 PHP
js对数字的格式化使用说明
2011/01/12 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
JavaScript Math.ceil() 函数使用介绍
2013/12/11 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
2016/12/07 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
2017/04/27 Javascript
BootStrap模态框不垂直居中的解决方法
2017/10/19 Javascript
vue 使用class创建和清除水印的示例代码
2020/12/25 Vue.js
测试、预发布后用python检测网页是否有日常链接
2014/06/03 Python
浅谈Python的异常处理
2016/06/19 Python
关于反爬虫的一些简单总结
2017/12/13 Python
Python将string转换到float的实例方法
2019/07/29 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
大学生新闻专业个人自我评价
2013/11/12 职场文书
大学运动会入场词
2014/02/22 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
财务负责人任命书
2014/06/06 职场文书
解除劳动关系协议书2篇
2014/11/28 职场文书
死者家属慰问信
2015/03/24 职场文书
2015年药店工作总结
2015/04/20 职场文书
英文辞职信范文
2015/05/13 职场文书
起诉书格式范文
2015/05/20 职场文书
电频谱管理的原则是什么
2022/02/18 无线电
cypress测试本地web应用
2022/06/01 Javascript