Shulou(Shulou.com)06/02 Report--

How to analyze CSS transparent skills, in response to this problem, this article details the corresponding analysis and solution, hoping to help more small partners who want to solve this problem find a simpler and easier way.

This summary is mainly to provide a detailed introduction to CSS opacity, code examples and explanations to implement this useful CSS technique in your project compatible with all browsers.

One thing to note about CSS transparency is that although it has been used for many years, it has never been a standard property. It is a non-standard technology and should be part of the CSS3 specification.

1. Old Opacity Settings

The following code is the transparency setting required for older versions of Firefox and Safari:

#myElement { -khtml-opacity: .5; -moz-opacity: 0.5; }

The-khtml-opacity setting is for older versions of the WebKit rendering engine, and this proprietary property is now obsolete unless you have users who need Safari 1.x. compatibility.

The second line uses the proprietary attribute-moz-opacity-to be compatible with earlier versions of Mozilla's rendering engine, as well as going back to Netscape Navigator. Firefox 0.9 does not require the-moz-opacity attribute, and Firefox 3.5 (which now uses the Gecko engine) no longer supports it.

CSS Transparency in Firefox, Safari, Chrome and Opera

The following code is CSS syntax for the simplest and most up-to-date opacity settings for all current browsers except IE:

#myElement { opacity: .7; }

The syntax above sets an element to 70% opaque (or 30% transparent). Setting opacity:1 makes the element opaque, while setting opacity:0 makes the element completely invisible. It's easy to remember that opacity is equivalent to opacity, and the smaller the opacity, the closer it is to transparency.

The opacity property can be exactly two decimal places, so values of ".01" and ".02" are actually different, although visibility is hard to detect. In general, accurate to one digit is enough, such as ".3" or ".7".

CSS transparency under IE

IE is still different from other browsers, and there are currently three different versions of IE in widespread use, transparency settings are different, sometimes requiring additional CSS to control:

#myElement { filter: alpha(opacity=40); }

The CSS above uses a dedicated filter property to set the transparency of IE 6 -8. Note for IE 6 and IE 7: For transparency settings to work, elements must be "laid out." An element can be laid out using CSS properties such as width and position. For more information about the Microsoft-specific hasLayout attribute and how to trigger it, see the 52CSS.com documentation.

Another way to set CSS transparency in IE8 is to use the following syntax (note the version indicated in the comments):

#myElement { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); /* First line valid under IE6, IE7 and IE8 */ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* Second line valid under IE8 only */}

The first line of code is for all current IE versions, and the second line is for IE8 only.

Notice the difference between the two lines: in the second line, the filter attribute is prefixed with-ms-, and the attribute value is quoted, as required by the syntax.

To be honest, with the alpha(opacity=40) syntax applied to any layout-oriented element in any version of IE as in the previous example, I'm not sure there's a need for the "progid" method.

Using JavaScript to set and change CSS transparency

You can access CSS opacity properties in JavaScript using the following syntax:

document.getElementById("myElement").style.opacity = ".4"; //for all modern browsers document.getElementById("myElement").style.filter = "alpha(opacity=40)"; //for IE

The above code can incrementally modify the transparency value using inline loops or other dynamic functions. Of course, you must first decide which line of code to use by feature detection.

Using JQuery to set and change CSS transparency

Setting CSS transparency directly with jQuery is more intuitive and easier to implement, because the code is the same in all browsers, and you don't have to worry about whether the element is "haslayout" under IE:

$("#myElement").css({ opacity: .4 }); //All browsers are valid

You can also animate an element transparently using jQuery code:

$("#myElement").animate({opacity: .4}, 1000, function() { //animation completed, valid in all browsers});

No matter how transparent the element was at the start of the animation, it ramps to transparency of ".4." The speed of the animation is set by the value "1000" and the animation time is in milliseconds. The last property in the code is an optional callback function that will be executed after the animation is complete.

If the transparency of the element has been set to ".4" in CSS, you won't notice any difference when the animation runs, so the transparency will be different at the beginning and end of the animation.

Transparency through RGBA

Another CSS3 technology is only supported in some new browsers (Firefox 3+, Opera 10.1+, Chrome 2+,Safari 3.1+) and can be configured via the alpha channel of RGBA. The syntax is as follows:

#rgba {background: rgba(98, 135, 167, .4);}

In the definition above, the background is colored by RGB (the first three numbers), and then the last one is an alpha setting to enforce transparency for a given color. This alpha setting is the same as the opacity property, and can be set to any number from 0 to 1, to exactly two decimal places. The higher the numerical value, the closer to a completely opaque color.

VII. Transparency through HSLA

Similar to the previous definition, CSS3 also allows color and alpha values to be set separately using HSLA, which stands for Hue, saturation, lightness, and Alpha. Here are examples of HSLA transparency:

#hsla {background: hsla(207, 38%, 47%, .4);}

For more on the explanation of HSLA colors, see this article from W3.org. As with RGBA transparency, the last number indicates the transparency setting, which has the same effect as RGBA. Note that an important benefit of RGBA and HSLA transparency is that these transparency settings do not affect the behavior of child elements, but they do through the opacity attribute. Alpha settings for RGBA and HSLA only affect the transparency of background colors, nothing more.

About how to carry out CSS transparent skills analysis of the answer to the question shared here, I hope the above content can be of some help to everyone, if you still have a lot of doubts not solved, you can pay attention to the industry information channel to learn more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.