CSS实现兼容各浏览器的透明度

最新推荐文章于 2024-08-10 08:45:09 发布

原创最新推荐文章于 2024-08-10 08:45:09 发布 · 227 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了CSS中实现元素透明度的各种方法，包括使用opacity属性、alpha滤镜以及-moz-opacity和-khtml-opacity等前缀属性，适用于不同浏览器的兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

突然想起就记下来

content{
background-color:#FFF;
background-color:rgba(255,255,255,0.7);
filter: alpha(opacity=70);
}


.content {  /* 兼容各浏览器实现透明度 */
      filter:alpha(opacity=50);  /*IE*/
      -moz-opacity:0.5;  /*Netscape Navigator*/
      -khtml-opacity: 0.5;  /*Safari */
      opacity: 0.5;  /*Firefox, Safari,  Opera*/
      background:#00F;
      color:yellow;
}

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.