css sets the background transparent text opaque, and the font transparent background opaque writing

The actual display effect diagram is as follows

1. The background is transparent and the font is opaque is the first divNotOpacity

Style: background: rgba(0, 0, 0, 0.7);

The first three are the color values of rgb, and the last is the transparency of the background color (0-1)

2. The font is transparent divOpacity

Style: color:rgba(255,255,255,0.5);

The font transparency uses color, the first three are the color value of rgb, and the latter is the transparency of the font 0-1

Remember: use a transparent font color, and background transparency, font used is opaque background .

Example:

<!DOCTYPE html>
<html lang="zh">
<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>h5结构</title>
    <style type="text/css">
        .divNotOpacity{
            left: 200px;
            top: 200px; 
            position: absolute;/* 绝对定位 */
            /* 以下为本身div的样式 */
            height: 50px;
            width: 400px;
            bottom: 0;
            color: #ffffff;
            background: rgba(0, 0, 0, 0.7); /* 背景透明，字体不透明(前三个值为rgb色素,后面的值为背景的透明度0-1) */    
            display: flex;/* 设置为弹性布局 */
            justify-content: space-around;/* 内容左右居中显示 */
            align-items: center; /* 内容上下居中显示 */
        }
        .divOpacity{
            left: 200px;
            top: 300px;
            position: absolute;/* 绝对定位 */
            /* 以下为本身div的样式 */
            height: 50px;
            width: 400px;
            background:black;
            color:rgba(255,255,255,0.5); /* 字体透明使用color,前三个是rgb,后面是字体的透明度0-1 */
            display: flex;/* 设置为弹性布局 */
            justify-content: space-around;/* 内容左右居中显示 */
            align-items: center; /* 内容上下居中显示 */
        }
    </style>
</head>
<body>
    <div class="divNotOpacity">
        背景透明，字体显示在最上面，不透明
    </div>
    <div class="divOpacity">
        字体是透明的
    </div>
</body>
</html>

css sets the background transparent text opaque, and the font transparent background opaque writing

Guess you like