兼容主流浏览器的CSS透明代码

旷材旷材旷

旷材旷材旷

2016-02-19 15:14

有了下面这个兼容主流浏览器的CSS透明代码教程,不懂兼容主流浏览器的CSS透明代码的也能装懂了,赶紧get起来装逼一下吧!

透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

.transparent_class {
 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的透明属性涉及到一个继承问题,当为父级元素设置透明度后,子元素将自动继承其透明度,比如本站的一个效果:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

即使你又为子元素指定透明度为1也是无效的。

对于子元素是文字的情况,我的解决方法一般是如果多少还能够看清,就不管。另一个折衷的方法是,为文本子元素指定一个相对更深的颜色。也就是说,当子元素继承透明度后,所得到的文本颜色正好就是你想要的。前提是,这个颜色还有加深的可能,和需要详细的计算颜色和透明度的值。

还有“取消透明度继承”的说法,这个说法是不太准确的,据我个人所知,没有任何取消透明度继承的方法。只能说,当想要实现“多个元素覆盖,只让指定的元素透明”时,可以使用的一些Hack。

搜了一下,找到一个不错的实现这种效果的方法 – 一个关于透明继承度的问题,有兴趣的朋友可以看看。原理很简单,添加一个空元素作为透明层,和不想透明但是要实现覆盖效果的元素为同级元素。父级元素使用position:relative定位; 两个子元素使用position:absolute定位,实现覆盖。

展开更多 50%)
分享

猜你喜欢

兼容主流浏览器的CSS透明代码

Web开发
兼容主流浏览器的CSS透明代码

编写跨浏览器兼容的CSS代码

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
编写跨浏览器兼容的CSS代码

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

浏览器CSS兼容方案

Web开发
浏览器CSS兼容方案

CSS Alpha透明代码相关知识学习

Web开发
CSS Alpha透明代码相关知识学习

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

主流浏览器兼容的基线对齐方法

平面设计 海报设计 广告设计 画报设计 签名设计 服装设计 名片设计 画册设计 版式设计 商标设计
主流浏览器兼容的基线对齐方法

DIV CSS布局浏览器兼容的问题

Web开发
DIV CSS布局浏览器兼容的问题

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

不同局域网内电脑如何实现互访实现文件或打印机共享

不同局域网内电脑如何实现互访实现文件或打印机共享

win10版本号怎么看

win10版本号怎么看
下拉加载更多内容 ↓