HTML transparency with CSS

The css3 draft defines{opacity: | inherit;}To declare the transparency of elements, which has been supported by most modern browsers, While IE has very early passed through specific private attributes.filterSo the transparency of HTML elements is everywhere. First, let's take a look at the method supported by browser A to implement element transparency with CSS:

 

Browser	Lowest Version	Solution
Internet Explorer	4.0	filter: alpha(opacity=xx);
	5.5	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx);
	8.0	filter: "alpha(opacity=xx)"; filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)"; -ms-filter: "alpha(opacity=xx)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)";
Firefox (gecko)	0.9 (1.7)	opacity
Opera	9.0	opacity
Safari (WebKit)	1.2 (125)	opacity

In IE8,-MS-filter is the alias of the filter. The difference between the two is that the relative value of-MS-filter must be enclosed by single quotation marks or double quotation marks, while filter is not required, in versions earlier than IE8, filter attribute values must not be enclosed by single or double quotation marks.

To implement transparency, HTML elements in IE must have layout. Such elements have the readable attribute haslayout and its value is true. The details are as follows:

1. body,img,table,tr,th,tdAnd other elementshasLayoutAlwaystrue.
2. typeIstext,button,fileOrselectOfinputOfhasLayoutAlwaystrue.
3. Set{position:absolute}ElementhasLayoutIstrue
4. Set{float:left|right}ElementhasLayoutIstrue
5. Set{display:inline-block}ElementhasLayoutIstrue
6. Set{height:xx}Or{width:xx}The element must be specific to one of the following two conditions:hasLayoutTotrue:
   1. In IE8 compatibility mode and earlier browsers than IE8displayThe value isblock, Such as demo3.
   2. The element is in compat mode.
7. Set{zoom:xx}Element in the IE8 compatibility mode or in the browser before IE8hasLayoutIstrueBut it is not triggered in standard IE8 mode.hasLayout.
8. Set{writing-mode:tb-rl}ElementhasLayoutIstrue.
9. ElementcontentEditableThe property value istrue.
10. In IE8 standard mode{display:block}ElementhasLayoutAlwaystrue, Such as demo8.

For details about haslayout, refer to tracing ing Internet Explorer "haslayout" Overview and on having layout.

It can be seen from the above that IE achieves the transparency of HTML elements so messy, there are multiple ways to make the elements transparent on IE for backward compatibility and their own private attributes, for example, demo1 to demo8 In the CSS opacity instance, although the IE team recommends transparent implementation:

{  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);  opacity: .5;}

At present, the best implementation method is demo4 in CSS opacity:

{    filter:alpha(opacity=30);    opacity:.3;}

In fact, currently the most popular JavaScript Framework's style setting method is applied in this way, and{zoom:1}To make the elementhasLayoutIstrueBut in IE8 standard modezoomIt cannot be triggered.hasLayout, So use them to sethasLayoutIsfalseWhen the transparency of the elements in IE8 standard mode is failed, this bug in Yui(I have submitted this bug to the Yui team and they will fix it in the next version. The latest version 2.8.0 still exists. We look forward to 2.9.0)The latest versions of prototype, jquery, and mootools are available. For details, see demo9 to demo11 in IE8 standard mode. Similarly, due to the wide variety of ways to set transparency in IE8, you need to consider multiple situations to use JavaScript to obtain the transparency value of HTML elements. Yui perfectly solves this problem. prototype is a little more comprehensive than jquery, mootools is a bug. For details, see demo1 to demo8 demos in IE. From this perspective, Yui No. 1, prototype No. 2, jquery No. 3, and mootools are used to rank the four frameworks.

I have implemented the function of setting and obtaining opacity to avoid the bug in the above framework. Please refer to demo12 in IE8 standard mode:

// Set the function of the CSS opacity attribute to solve the IE8 problem var setopacity = function (El, I) {If (window. getcomputedstyle) {// for non-ie el. style. opacity = I;} else if(document.doc umentelement. currentstyle) {// for IE if (! El. currentstyle. haslayout) {El. style. Zoom = 1 ;}if (! El. currentstyle. haslayout) {// zoom does not take effect in IE8, so set inline-block El again. style. display = 'inline-Block';} Try {// test whether there is a filter // http://msdn.microsoft.com/en-us/library/ms532847%28VS.85%29.aspx if (El. filters) {If (El. filters ('alpha') {el. filters ('alpha '). opacity = I * 100;} else {el. style. filter + = 'Alpha (opacity = '+ I * 100 +') ';}} catch (e) {el. style. filter = 'Alpha (opacity = '+ I * 100 +') ';}}// get CSS o Functions of the pacity property value // reference from the http://developer.yahoel.com/yui/docs/YAHOO.util.Dom.html#method_getStylevar getopacity = function (EL) {VaR value; If (window. getcomputedstyle) {value = El. style. opacity; If (! Value) {value = el. ownerdocument. defaultview. getcomputedstyle (El, null) ['opacity '];} return value;} else if(document.doc umentelement. currentstyle) {value = 100; try {// will error if no DXImageTransform value = el. filters ['dximagetransform. microsoft. alpha ']. opacity;} catch (e) {try {// make sure its in the document value = el. filters ('alpha '). opacity;} catch (ERR) {}} return value/100 ;}}

Appendix: instance in the pop-up registration box

 <! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <HTML xmlns = "http://www.w3.org/1999/xhtml"> <pead> <meta http-equiv =" content-Type "content =" text/html; charset = utf8 "/> <title> prompt </title> <MCE: style> <! -- * {Margin: 0; padding: 0; font-size: 12px;} HTML, body {Height: 100%; width: 100% ;}# content {Background: # f8f8f8; padding: 30px; Height: 100% ;}# content A {font-size: 30px; color: #369; font-weight: 700 ;}# alert {border: 1px solid #369; width: 300px; Height: 150px; Background: # e2ecf5; Z-index: 1000; position: absolute; display: none;} # Alert H4 {height: 20px; Background: #369; color: # FFF; padding: 5px 0 0 5px;} # Alert H4 span {flo At: Left ;}# alert H4 span # Close {margin-left: 210px; font-weight: 500; cursor: pointer ;}# alert P {padding: 12px 0 0 30px;} # Alert P input {width: 120px; margin-left: 20px;} # Alert P input. myindium {border: 1px solid # CCC; Height: 16px ;}# alert P input. sub {width: 60px; margin-left: 30px;} --> </MCE: style> <style mce_bogus = "1"> * {margin: 0; padding: 0; font-size: 12px;} HTML, body {Height: 100%; width: 100% ;}# content {backgr Ound: # f8f8f8; padding: 30px; Height: 100% ;}# content A {font-size: 30px; color: #369; font-weight: 700 ;} # Alert {border: 1px solid #369; width: 300px; Height: 150px; Background: # e2ecf5; Z-index: 1000; position: absolute; display: none ;} # Alert H4 {Height: 20px; Background: #369; color: # FFF; padding: 5px 0 0 5px ;}# alert H4 span {float: Left ;} # Alert H4 span # Close {margin-left: 210px; font-weight: 500; cursor: pointer ;}# alert P {Padding: 12px 0 0 30px;} # Alert P input {width: 120px; margin-left: 20px;} # Alert P input. myindium {border: 1px solid # CCC; Height: 16px ;}# alert P input. sub {width: 60px; margin-left: 30px ;} </style> </pead> <body> AA <Div id = "content"> <a href = "#" mce_href = "#" style = "position: absolute; top: 50%; left: 50% "> Registration </a> </div> <Div id =" alert "> <H4> <span> Register now </span> <span id =" close "> disable </span> </H4> <p> <label> User Name </label> <in Put type = "text" class = "myindium" onmouseover = "this. style. border = '1px solid # f60' "onfoucs =" this. style. border = '1px solid # f60' "onblur =" this. style. border = '1px solid # CCC '"/> </P> <p> <label> password </label> <input type =" password "class =" myindium "onmouseover = "this. style. border = '1px solid # f60' "onfoucs =" this. style. border = '1px solid # f60' "onblur =" this. style. border = '1px solid # CCC '"/> </P> <p> <input type =" Submit "Value =" register "class =" sub "/> <input type =" reset "value =" reset "class =" sub "/> </P> </div> <MCE: script Type = "text/JavaScript"> <! -- Var myalert = document. getelementbyid ("alert"); var Reg = document. getelementbyid ("content "). getelementsbytagname ("A") [0]; var mclose = document. getelementbyid ("close"); Reg. onclick = function () {myalert. style. display = "Block"; myalert. style. position = "absolute"; myalert. style. top = "50%"; myalert. style. left = & quot; 50% & quot; myalert. style. margintop = "-75px"; myalert. style. marginleft = "-150px"; mybg = document. createelement ("Div"); mybg. setattribute ("ID", "mybg"); mybg. style. background = "# e0ecf8"; mybg. style. width = "100%"; mybg. style. height = "100%"; mybg. style. position = "absolute"; mybg. style. top = "0"; mybg. style. left = "0"; mybg. style. zindex = "500"; mybg. style. opacity = "0.3"; mybg. style. filter = "alpha (opacity = 30)"; document. body. appendchild (mybg); document. body. style. overflow = "hidden";} mclose. onclick = function () {myalert. style. display = "NONE"; mybg. style. display = "NONE" ;}// --> </MCE: SCRIPT> </body> </ptml>