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 相关文章推荐
CSS3 please 跨浏览器的CSS3产生器
Mar 14 HTML / CSS
CSS3中:nth-child和:nth-of-type的区别深入理解
Mar 10 HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
CSS3近阶段篇之酷炫的3D旋转透视
Apr 28 HTML / CSS
HTML5对手机页面长按会粘贴复制禁用的解决方法
Jul 19 HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
html5表单的required属性使用
Jul 07 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 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
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
zend框架实现支持sql server的操作方法
2016/12/08 PHP
Laravel使用原生sql语句并调用的方法
2019/10/09 PHP
不懂JavaScript应该怎样学
2008/04/16 Javascript
InnerHtml和InnerText的区别分析
2009/03/13 Javascript
JS重要知识点小结
2011/11/06 Javascript
JS和JQ的event对象区别分析
2014/11/24 Javascript
小米公司JavaScript面试题
2014/12/29 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
js实现卡片式项目管理界面UI设计效果
2015/12/08 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
nodejs简单实现操作arduino
2016/09/25 NodeJs
深入浅析Vue中的Prop
2018/06/10 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
vue以组件或者插件的形式实现throttle或者debounce
2019/05/22 Javascript
vue-mugen-scroll组件实现pc端滚动刷新
2019/08/16 Javascript
JS pushlet XMLAdapter适配器用法案例解析
2020/10/16 Javascript
Python脚本实现代码行数统计代码分享
2015/03/10 Python
python发送HTTP请求的方法小结
2015/07/08 Python
python发送邮件实例分享
2017/07/28 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
Python中Scrapy爬虫图片处理详解
2017/11/29 Python
Python内存管理实例分析
2019/07/10 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
python读写数据读写csv文件(pandas用法)
2020/12/14 Python
密封类可以有虚函数吗
2014/08/11 面试题
竞争上岗演讲稿
2014/01/05 职场文书
家长通知书教师评语
2014/04/17 职场文书
师德师风自查材料
2014/10/14 职场文书
工程承包协议书
2014/10/20 职场文书
2015年七一建党节演讲稿
2015/03/19 职场文书
公司开除员工通知
2015/04/22 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js