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

2016-02-19 15:14 10 1 收藏

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

【 tulaoshi.com - Web开发 】

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

(本文来源于图老师网站,更多请访问http://www.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://www.tulaoshi.com/webkaifa/)

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

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

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

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

来源:http://www.tulaoshi.com/n/20160219/1609205.html

延伸阅读
标签: Web开发
在22333.com前面的文章中,我们讲过CSS Reset是指重设浏览器的样式。不同的浏览器默认的样式可能不近相同,所有开发时的第一件事可能就是如果把他们统一。 下面的代码是YaHoo的方法,我们可以参考学习。 总结与编写出,适合自己工作与学习的CSS Reset代码。 body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, form,fieldset,...
标签: Web开发
很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但在很多情形,一种近似的兼容还是很容易实现的,本文讲的是各种跨浏览器兼容的 CSS 编码准则和技巧。 作为 Web 设计师,你的网站在各种浏览器中有完全一样的表现是很多人的目标,然而这是一个永远无法真正实现的目标,很多人认为,完美的跨浏览器兼容并不必要,这样说虽然没错,但...
标签: Web开发
一段关于用js实现终止浏览器对页面HTML的继续解析的函数记录,该函数将兼容OPERA,FIREFOX,OPEAR等浏览器,在处理页面内底部恶意代码有一定效果,可以达到不影响页面效果的目的。  程序代码 script language="JavaScript"   !--     function bestop(){     if(!(window.attachevent || window.ope...
前一段时间,我经常收到一个关于如何在IE浏览器中使用CSS3的 border-radius 属性实现圆角HTML元素的问题。你或许知道CSS3的border-radius 属性被Safari、Firefox和Chrome等浏览器原生支持,但是由于某些原因IE并不支持它。 那么要想在IE中实现圆角,你不得不使用一些技巧,比如使用带有背景图片的CSS类(看一下这篇文章)。 而我知道的在各个浏...
标签: Web开发
CSS hack是指我们为了兼容各浏览器,而使用的特别的css定义技巧。这是国外摘来的一张CSS hack列表,显示了各浏览器对css hack的支持程度,对我们制作兼容网页非常有帮助。

经验教程

651

收藏

87
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部