Home >Web Front-end >Front-end Q&A >How to set transparent background in html
How to set transparent background in html
- 青灯夜游Original
- 2021-03-08 10:53:4740126browse
How to set a transparent background in html: 1. Directly use "backgroud:rgba(R,G, B, A)" to set a transparent background. 2. First use the "backgroud: color value;" style to set the background color; then use the "opacity: transparency value" style to add a transparency to the background color.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
htmlSet transparent background
There are two ways to set transparent background color in html: one is to set it through rgba method, The other is through background and opacity settings.
1. RGB method
The so-called RGBA color is the three primary colors of RGB plus ALPHA. Provides transparency properties while adding color to the background.
Usage:
background:rgba(R,G, B, A);
Red (R): represents the red component of the color, an integer between 0 and 255 (percentage 0% ~ 100% can also be used) .
Green (G): represents the green component in the color, an integer between 0 and 255 (percentage 0% ~ 100% can also be used).
Blue (B): represents the blue component of the color, an integer between 0 and 255 (percentage 0% ~ 100% can also be used).
Transparency (A): represents transparency, ranging from 0 (completely transparent) to 1 (completely opaque).
Let’s take a look at a specific example of setting the background color transparency through rgba:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div{
width: 200px;
height: 200px;
line-height: 30px;
text-align: center;
margin: 0 auto;
}
.div1{
background: rgba(220, 38, 38, 1);
}
.div2 {
background: rgba(220, 38, 38, 0.2);
}
</style>
</head>
<body>
<div class="div1">背景颜色，没有设置透明度</div><br />
<div class="div2">背景颜色，设置了透明度</div>
</body>
</html>Rendering:
1. Set the background color to be transparent through background and opacity
The attribute value in the background attribute is relatively simple, so I won’t go into details here. Let’s take a brief look here. Opacity attribute
The "opacity" of the opacity attribute parameter is represented by a number, ranging from 0.0 to 1.0. Fully transparent is 0.0, and fully opaque is 1.0. In other words, the larger the number, the more opaque the element is.
In addition to the "opacity" parameter, there is also inherit to inherit the parent layer properties. However, browser support is poor and it is not recommended to use it.
After reading the introduction of the two attributes, let's look at the specific example of setting the background color transparency through backgroud and opacity
The code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 200px;
line-height: 30px;
text-align: center;
margin: 0 auto;
border: 1px solid #ccc;
}
.div1 {
background: red;
}
.div2 {
background: red;
opacity: 0.2;
}
</style>
</head>
<body>
<div class="div1">背景颜色，没有设置透明度</div><br />
<div class="div2">背景颜色，设置了透明度</div>
</body>
</html>Rendering:
Recommended tutorial: CSS video tutorial
Recommended online manual: css online manual
The above is the detailed content of How to set transparent background in html. For more information, please follow other related articles on the PHP Chinese website!