Home >Web Front-end >CSS Tutorial >How to set transparency in css3
How to set transparency in css3
- WBOYOriginal
- 2021-11-19 17:50:336842browse
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);".
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.
Output result:
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>Output result:
3. Use the filter attribute to define the visual effect of the element (usually ) (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>Output result:
(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!