How to set transparency in css3-CSS Tutorial-php.cn

How to set transparency in css3

WBOY

Release： 2021-11-19 17:50:33

Original

6865 people have browsed it

Method: 1. Use the rgba() function, the syntax is "rgba (red value, green value, blue value, transparency value);"; 2. Use the opacity attribute, the syntax is "opacity: transparency value ;"; 3. Use the filter attribute, the syntax is "filter:opacity (transparency value);".

How to set transparency in css3

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

How to set the transparency of css3

1. Use the rgba() function to use red (R), green (G), blue (B) ) and transparency (A) to generate a variety of colors.

RGBA means red, green, blue, transparency (English: Red, Green, Blue, Alpha).

Red (R) An integer between 0 and 255, representing the red component of the color. Green (G) An integer between 0 and 255, representing the green component of the color. Blue (B) An integer between 0 and 255, representing the blue component of the color. Transparency (A) takes a value between 0 and 1, representing transparency.

How to set transparency in css3

Output result:

How to set transparency in css3

2. Use the opacity attribute to set the opacity level of the element. The code is as follows:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
background-color:red;
opacity:0.5;
filter:Alpha(opacity=50); /* IE8 以及更早的浏览器 */
}
</style>
</head>
<body>
<div>本元素的不透明度是 0.5。请注意，文本和背景色都受到不透明级别的影响。</div>
</body>
</html>

Copy after login

Output result:

How to set transparency in css3

3. Use the filter attribute to define the visual effect of the element (usually How to set transparency in css3 ) (for example : Blur and Saturation). The code is as follows:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    -webkit-filter:opacity(50%); /* Chrome, Safari, Opera */
    filter: opacity(50%);
}
</style>
</head>
<body>
<p>图片转为透明:</p>
<img src="pineapple.jpg" alt="Pineapple" width="300"    style="max-width:90%">
</body>
</html>

Copy after login

Output result:

How to set transparency in css3

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set transparency in css3. For more information, please follow other related articles on the PHP Chinese website!