CSS3中的Opacity多访问器全透明度适配性难题

日期:2021-03-04 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

用来设置元素全透明度的 Opacity 是CSS 3里的1个特性。自然如今还仅有少一部分访问器适用。但是各个访问器都有自身的独享特性来适用,在其中包含老版本号的Mozilla和Safari:

IE: filter:alpha(opacity)
Mozilla: -moz-opacity
Safari: -khtml-opacity

很悲剧的是,你没看见Opera,老版本号的Opera并沒有甚么独享特性能够替代opacity。(新版Opera早已适用opacity)

因此之前用CSS设置1个元素半全透明的话,将会会这样写:

CSS Code拷贝內容到剪贴板
  1. .opacity{   
  2. filter:alpha(opacity=50); /* IE */  
  3. -moz-opacity:0.5; /* 老版Mozilla */  
  4. -khtml-opacity:0.5; /* 老版Safari */  
  5. opacity: 0.5; /* 适用opacity的访问器*/  
  6. }  

用javascript来设置1个元素为半全透明:

JavaScript Code拷贝內容到剪贴板
  1. object.filter = "alpha(opacity=" + opacity + ")"/* IE */  
  2. object.MozOpacity = (opacity / 100); /* 老版Mozilla */  
  3. object.KhtmlOpacity = (opacity / 100); /* 老版Safari */  
  4. object.opacity = (opacity / 100); /* 适用opacity的访问器*/  
  5.   

下面给大伙儿详细介绍css全透明度的设定 (适配全部访问器)

1句话搞定全透明情况!

CSS Code拷贝內容到剪贴板
  1. .transparent_class {          
  2.       filter:alpha(opacity=50);          
  3.       -moz-opacity:0.5;          
  4.       -khtml-opacity: 0.5;          
  5.       opacity: 0.5;          
  6. }       

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 .