CSS3 Tutorial (8): CSS3 Transparency Guide

CSS3 Transparent ... Non-transparent ... Gradient... Call it whatever you want! Here are some guidelines for using CSS3 transparency and some examples.

In fact, this firefox has long ago supported, and IE has not supported!
Previous post: CSS3 tutorial (7): CSS3 embedded fonts
The "opacity" declaration is used to set the transparency of an element: layers, text, pictures, etc... An element with a opacity value of 1 is completely opaque, whereas a value of 0 is completely transparent and invisible. Any value between 1 and 0 indicates how transparent the element is.
Browser compatibility
Opacity is the best browser support for a CSS3 element ... Except ie!, of course. CSS3 Transparent (example 1: Layer)

The above transparency example uses the following style:

P.OPACITYL1 {background: #036; opacity:0.2; width:575px; height:20px;} p.opacityl2 {background: #036; opacity:0.4; width : 575px; height:20px; } p.opacityl3 {background: #036; opacity:0.6; width:575px; height:20px;} p.opacityl4 {background: #036; opacity:0.8; Widt h:575px; height:20px; } p.opacityl5 {background: #036; opacity:1.0; width:575px; height:20px;}

Browser support:

Firefox (3.05 ...)

Google Chrome (1.0.154 ...)

Google Chrome (2.0.156 ...)

Internet Explorer (IE7, IE8 RC1)

Opera (9.6 ...)

Safari (3.2.1 windows ...) CSS 3 Transparency (Example 2: Picture)

We can also use different transparency effects on the image, just like the example above. A cool app is to apply opacity to: hover, which implements a linked mouse effect.

img.opacity1 {opacity:0.25; width:150px; height:100px;} img.opacity2 {opacity:0.50; width:150px; height:100px;} img.op acity3 {opacity:0.75; width:150px; height:100px;}

Browser support:

Firefox (3.05 ...)

Google Chrome (1.0.154 ...)

Google Chrome (2.0.156 ...)

Internet Explorer (IE7, IE8 RC1)

Opera (9.6 ...)

Safari (3.2.1 windows ...)

The above is CSS3 Tutorial (8): CSS3 Transparency Guide content, more relevant content please pay attention to topic.alibabacloud.com (www.php.cn)!

Related articles:

CSS set an element translucent

Example description of using RGBA to adjust transparency in CSS3

Implement CSS3 opacity complete code

