How to achieve text opaque background translucent effect in css-CSS Tutorial-php.cn

How to achieve text opaque background translucent effect in css

WBOY

Release： 2021-11-26 18:45:41

Original

5028 people have browsed it

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);}".

How to achieve text opaque background translucent effect in css

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>

Copy after login

Output result:

How to achieve text opaque background translucent effect in css

(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!