元素的层级与元素的透明

Author Avatar
Ninefire 6月 06, 2018
  • 在其它设备中阅读本文章

如果定位元素的层级相同,则结构中写在后面的元素会盖住写在前面的元素。

  • 通过z-index属性来设置元素的层级
    可以为z-index指定一个正整数的值,该值将会作为当前元素的层级,层级高的显示在层级底的上层。
    父元素的层级再高,也不会盖住子元素。

对于没有开启定位的元素不能使用z-index


  • 通过opacity来设置元素背景的透明
    可以为opacity指定一个0~1之间的值,如:
    • opacity: 0;表示完全透明
    • opacity: 0.5;表示半透明
    • opacity: 1;表示完全不透明

不幸的是IE8及以下的浏览器不支持opacity属性。

  • 通过filter:alpha(opacity=透明度);来兼容这些浏览器。
    可以指定一个0~100之间的值,如:
    • filter: alpha(opacity=0);表示完全透明
    • filter: alpha(opacity=50);表示半透明
    • filter: alpha(opacity=100);表示完全不透明

这种方式支持IE6,但是无法在IE Tester中进行测试,这是IE Tester的一个bug.

如发现错误请联系我,谢谢你。
本文链接:http://ninefire.tk/HTML&CSS.basics/54.html