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

How to solve the CSS3 Opacity multi-browser transparency compatibility problem, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain for you in detail, people with this need can come to learn, I hope you can get something.

The Opacity used to set the transparency of the element is an attribute in CSS 3. Of course, only a small number of browsers support it. However, each browser has its own private properties to support, including older versions of Mozilla and Safari:

IE: filter:alpha (opacity)

Mozilla:-moz-opacity

Safari:-khtml-opacity

Unfortunately, you don't see Opera. In the old version of Opera, there are no private properties that can replace opacity. (the new version of Opera already supports opacity)

So if you used to set an element translucent with CSS, you might write something like this:

CSS Code copies content to the clipboard

.opacity {

Filter:alpha (opacity=50); / * IE * /

-moz-opacity:0.5; / * Old Mozilla * /

-khtml-opacity:0.5; / * Old Safari * /

Opacity: 0.5; / * browsers that support opacity * /

}

Use javascript to set an element to be translucent:

JavaScript Code copies content to the clipboard

Object.filter = "alpha (opacity=" + opacity + ")"; / * IE * /

Object.MozOpacity = (opacity / 100); / * older Mozilla * /

Object.KhtmlOpacity = (opacity / 100); / * older Safari * /

Object.opacity = (opacity / 100); / * browsers that support opacity * /

The following is to introduce the css transparency settings (compatible with all browsers)

In a word, deal with the transparent background!

CSS Code copies content to the clipboard

.transparent _ class {

Filter:alpha (opacity=50)

-moz-opacity:0.5

-khtml-opacity: 0.5

Opacity: 0.5

}

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.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.