常用的四种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 相关文章推荐
CSS心形加载的动画源码的实现
Mar 09 HTML / CSS
详解纯CSS3制作的20种loading动效
Jul 05 HTML / CSS
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
Oct 10 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
CSS3制作圆角图片和椭圆形图片
Jul 08 HTML / CSS
使用css实现android系统的loading加载动画
Jul 25 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 HTML / CSS
HTML5新特性之用SVG绘制微信logo
Feb 03 HTML / CSS
基于canvas的骨骼动画的示例代码
Jun 12 HTML / CSS
关于HTML编码导致的乱码问题
Sep 04 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
古巴咖啡 Cubita琥爵咖啡 独特的加勒比海风味咖啡
2021/03/06 新手入门
一些被忽视的PHP函数(简单整理)
2010/04/30 PHP
Thinkphp搭建包括JS多语言的多语言项目实现方法
2014/11/24 PHP
php生成图片验证码的方法
2016/04/15 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
JQuery中根据属性或属性值获得元素(6种情况获取方法)
2013/01/17 Javascript
jquery解析XML字符串和XML文件的方法说明
2014/02/21 Javascript
调用jQuery滑出效果时闪烁的解决方法
2014/03/27 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
2020/06/23 Javascript
理解javascript对象继承
2016/04/17 Javascript
BootStrap.css 在手机端滑动时右侧出现空白的原因及解决办法
2016/06/07 Javascript
jQuery中Datatables增加跳转到指定页功能
2017/02/08 Javascript
nodejs socket服务端和客户端简单通信功能
2017/09/14 NodeJs
微信小程序实现左右列表联动
2020/05/19 Javascript
TypeScript中的方法重载详解
2019/04/12 Javascript
JS代码触发事件代码实例
2020/01/02 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
在Python中移动目录结构的方法
2016/01/31 Python
python动态加载包的方法小结
2016/04/18 Python
python实现人工智能Ai抠图功能
2019/09/05 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Macbook安装Python最新版本、GUI开发环境、图像处理、视频处理环境详解
2020/02/17 Python
使用Keras训练好的.h5模型来测试一个实例
2020/07/06 Python
阿联酋航空假期:Emirates Holidays
2018/03/20 全球购物
工程造价专业大专生求职信
2013/10/06 职场文书
竞选班长演讲稿
2013/12/30 职场文书
幼儿园中班教学反思
2014/02/10 职场文书
运动会入场词200字
2014/02/15 职场文书
指导教师评语
2014/04/26 职场文书
2015年农村党员公开承诺事项
2015/04/28 职场文书
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL