css透明度
2015-10-08 15:07
761 查看
一句话搞定透明背景!
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest in this subject.
Here is what each of those CSS properties is for:
opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all
you need if all browsers supported current standards. Which, of course, they don’t.
filter:alpha(opacity=50); This one you need for IE.
-moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
-khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit .
css控制透明度倒不麻烦。
filter:alpha(opacity=50);
/*IE滤镜,透明度50%*/
-moz-opacity:0.5;
/*Firefox私有,透明度50%*/
opacity:0.5;/*其他,透明度50%*/
举个例子:通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试
#test{
background-color:#0000CC;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
width:100px;
height:100px;
}
但是还是会有很多问题,浏览器兼容性问题,等而且IE滤镜的频繁使用会使浏览器的执行效率降低。所以不提倡过多使用。也还有其他方法可以模拟,比如用宽高都是1px的透明png图片覆盖等等。
/**************************************************/
LZ自己举一反三啊,前景色不就是color么
#test{
background-color:#000
}
#test span{
color:#fff;zoom:1 /*触发IE下块级元素*/
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
<div id="test"><span>前景色透明度</span></div>
LZ看看“前景色透明度”这几个字是不是纯白色,还是白色的50%透明
.transparent_class {
filter:alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
}
UPDATE: I wanted to pull this post out of the archives and update it a bit because it there seems to be a good amount of interest in this subject.
Here is what each of those CSS properties is for:
opacity: 0.5; This is the “most important” one because it is the current standard in CSS. This will work in most versions of Firefox, Safari, and Opera. This would be all
you need if all browsers supported current standards. Which, of course, they don’t.
filter:alpha(opacity=50); This one you need for IE.
-moz-opacity:0.5; You need this one to support way old school versions of the Mozilla browsers like Netscape Navigator.
-khtml-opacity: 0.5; This is for way old versions of Safari (1.x) when the rendering engine it was using was still referred to as KTHML, as opposed to the current WebKit .
css控制透明度倒不麻烦。
filter:alpha(opacity=50);
/*IE滤镜,透明度50%*/
-moz-opacity:0.5;
/*Firefox私有,透明度50%*/
opacity:0.5;/*其他,透明度50%*/
举个例子:通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试
#test{
background-color:#0000CC;
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
width:100px;
height:100px;
}
但是还是会有很多问题,浏览器兼容性问题,等而且IE滤镜的频繁使用会使浏览器的执行效率降低。所以不提倡过多使用。也还有其他方法可以模拟,比如用宽高都是1px的透明png图片覆盖等等。
/**************************************************/
LZ自己举一反三啊,前景色不就是color么
#test{
background-color:#000
}
#test span{
color:#fff;zoom:1 /*触发IE下块级元素*/
filter:alpha(opacity=50);
-moz-opacity:0.5;
opacity:0.5;
}
<div id="test"><span>前景色透明度</span></div>
LZ看看“前景色透明度”这几个字是不是纯白色,还是白色的50%透明
相关文章推荐
- css外部与内部样式表
- css position: relative | absolute | static | fixed详解
- 转载 -- CSS3 中关于 select 下拉列表的样式
- 一览css布局标准
- <input type="file">定义样式并获取上传文件路径及指定文件类型
- <input type="file">定义样式并获取上传文件路径及指定文件类型
- 【Qt】QTableView表格滚动条样式实现QStyleSheet
- css中width:auto和width:100%的区别有哪些
- CSS3弹性盒模型flexbox完整版教程
- Dialog使用自定义的样式
- css布局模型之绝对定位与相对定位
- JS+CSS实现的蓝色table选项卡效果
- JS+CSS实现的蓝色table选项卡效果
- css关于浮动的例子--float
- 用CSS来画圆
- Holder 可直接在客户端渲染图片的占位。支持在线和离线,提供一个链式 API 对图像占位进行样式处理。
- CSS 盒模型
- css选择器优先级
- 用css实现条纹背景
- css3 中的transition和transform