Home > Article > Web Front-end > How to make background transparent and text opaque in css?
How to make background transparent and text opaque in css?
- 醉折花枝作酒筹Original
- 2021-04-20 17:58:5412404browse
In CSS, you can use the rgba function to achieve transparent background and opaque text. You only need to set "rgba (value, value, value, value)" for the background of the element; where transparency (A) takes the value 0 Between ~1, it represents transparency. A value of 0 represents completely transparent, and a value of 1 represents completely opaque.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
Use rgba in css3:
r: red, take a positive integer or percentage;
g: green, take a positive integer or percentage;
b: blue, take a positive Integer or percentage;
a:alpha, take a number between 0 and 1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3的rgba</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
padding: 50px;
}
.mydemo{
padding: 25px;
background-color: red;
background-color:rgba(255,0,0,0.5);
}
.mydemo p{
color: black;
}
</style>
</head>
<body>
<div class="mydemo">
<p>myIp</p>
</div>
</html>
Recommended learning:css video tutorial
The above is the detailed content of How to make background transparent and text opaque in css?. For more information, please follow other related articles on the PHP Chinese website!