常用的四种CSS透明属性介绍


Posted in HTML / CSS onApril 12, 2014

如下代码:

复制代码
代码如下:

.mask-layer {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
opacity:0.5;
}
 
上面的几个属性分别是:
复制代码
代码如下:

opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera.
filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1.
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。

 
CSS透明度继承问题但CSS的透明属性涉及到一个继承问题,当为父级元素设置透明度后,子元素将自动继承其透明度,比如这样的一个效果:

常用的四种CSS透明属性介绍 
即使你又为子元素指定透明度为1也是无效的。
 
对于子元素是文字的情况,我的解决方法一般是如果多少还能够看清,就不管。另一个折衷的方法是,为文本子元素指定一个相对更深的颜色。也就是说,当子元素继承透明度后,所得到的文本颜色正好就是你想要的。前提是,这个颜色还有加深的可能,和需要详细的计算颜色和透明度的值。
 
还有一种方法就是,透明层独立出来,如下代码,先.mod设置position:relative;然后.mask-layer设置position:absolute;z-index:1;最后.title设置position:absolute;z-index:2;

复制代码
代码如下:

<div class="mod">
<img src="images/QQ截图20140411111512.png" alt="" />
<p class="mask-layer"></p>
<p class="title">小清新,你喜欢吗</p>
</div>
HTML / CSS 相关文章推荐
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
使用HTML5捕捉音频与视频信息概述及实例
Aug 22 HTML / CSS
HTML5 canvas实现雪花飘落特效
Mar 08 HTML / CSS
基于HTML5的WebSocket的实例代码
Aug 15 HTML / CSS
HTML5 video 事件应用示例
Sep 11 HTML / CSS
HTML5轻松实现全屏视频背景的示例
Apr 23 HTML / CSS
Html5 canvas实现粒子时钟的示例代码
Sep 06 HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 HTML / CSS
HTML5 直播疯狂点赞动画实现代码 附源码
Apr 14 HTML / CSS
纯CSS实现一个简单步骤条的示例代码
Jul 15 HTML / CSS
可以随进度显示不同颜色的css3进度条分享
Apr 11 #HTML / CSS
css3发光搜索表单分享
Apr 11 #HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 #HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 #HTML / CSS
css3 线性渐变和径向渐变示例附图
Apr 08 #HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 #HTML / CSS
使用css3制作登录表单的步骤
Apr 07 #HTML / CSS
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
PHP 文件类型判断代码
2009/03/13 PHP
php简单实现查询数据库返回json数据
2015/04/16 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
如何使用php等比例缩放图片
2016/10/12 PHP
获取css样式表内样式的js函数currentStyle(IE),defaultView(FF)
2011/02/14 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
2013/07/11 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
js+canvas实现动态吃豆人效果
2017/03/22 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
React应用中使用Bootstrap的方法
2017/08/15 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
Angularjs之如何在跨域请求中传输Cookie的方法
2018/06/01 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
Angular6 正则表达式允许输入部分中文字符
2018/09/10 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
[56:00]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第一局
2016/03/05 DOTA
Python中查看文件名和文件路径
2017/03/31 Python
Python分治法定义与应用实例详解
2017/07/28 Python
Python推导式简单示例【列表推导式、字典推导式与集合推导式】
2018/12/04 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
如何让python的运行速度得到提升
2020/07/08 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
中医药大学毕业生自荐信
2013/11/08 职场文书
新年主持词
2014/03/27 职场文书
师范生见习报告
2014/10/31 职场文书
2014年超市工作总结
2014/11/19 职场文书
新人入职感言
2015/07/31 职场文书
2015年店长个人工作总结
2015/10/23 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
2019年中,最受大众欢迎的6本新书
2019/08/07 职场文书