Home > Article > Web Front-end > How to achieve text opaque background translucent effect in css
How to achieve text opaque background translucent effect in css
- WBOYOriginal
- 2021-11-26 18:45:415109browse
Method: 1. Use the width and height attributes to set the size of the text element to be the same as the parent element; 2. Use the background attribute and rgba() function to achieve the text opaque background translucent effect, the syntax "text element {background :rgba(255,255,255,transparent value);}".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
How to achieve text opaque background translucent effect in css
In css, you can use the position attribute and set it to absolute bit to generate text elements Absolute positioning, positioned relative to the first parent element other than static positioning. Position it absolutely relative to the image element.
Use the background attribute and rgba() function to set the transparency of the background image.
Let’s take an example to see how to set the text opaque background semi-transparent effect. The example is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.demo2-bg{
background: url(1118.02.png);
background-size: cover;
width: 500px;
height: 300px;
position: relative;
}
.demo2{
width: 500px;
height: 300px;
background:rgba(255,255,255,0.3);
}
</style>
</head>
<body>
<div class="demo2-bg">
<div class="demo2">背景图半透明，文字不透明</div>
</div>
</body>
</html>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to achieve text opaque background translucent effect in css. For more information, please follow other related articles on the PHP Chinese website!