Example of setting div background transparency

Time:2021-10-23

There are two common ways to make the div background transparent:

1. Set the opacity attribute. The values of 0 ~ 1, 0 means transparent and 1 means opaque. However, this method will also set the content on the div to be transparent at the same time.

The effects are as follows:

在这里插入图片描述

2. Through the background color setting of RGBA format, the format is: background color: RGBA (0,0,0,0 ~ 1), 0 means transparent and 1 means opaque.

在这里插入图片描述

The code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .id{
            width: 600px;
            height: 300px;
        
        }
        .tm1{
            margin: 40 auto;
            text-align: center;
            line-height: 200px;
            width: 800px;
            height: 200px;
            background-color: yellow;
            opacity: 0.6;
        }
        .tm2{
            margin: 40 auto;
            text-align: center;
            line-height: 200px;
            width: 800px;
            height: 200px;
            background-color: rgba(255, 255, 0, 0.5);
        }
    </style>
</head>
<body>
    <!-- Background div -- >
    <div class="id">
    <!-- Transparent div method I -- >
    < div class = "TM1" > transparent div method 1: set the transparency through opacity, and the text on the div is also transparent: opacity: 0.6</ div><br>
    <!-- Transparent div method 2 -- >
    < div class = "TM2" > transparent div method 2: set the transparency through RGBA. The text on the div is opaque: background color: RGBA (255,0,0.5)</ div>
</div>
</body>
</html>

Here is another point to note:
The rgba() function uses red ®、 Green (g), blue (b) and transparency (a) are superimposed to generate various colors.

RGBA is red, green, blue and transparency (English: red, green, blue and alpha).
Red (R) an integer between 0 and 255, representing the red component of the color..
Green (g) an integer between 0 and 255 representing the green component of the color.
Blue (b) an integer between 0 and 255, representing the blue component of the color.
The value of transparency (a) is between 0 and 1, representing transparency.
You can find the RGBA value in Baidu Encyclopedia
be similar to:

在这里插入图片描述

Color code comparison table link:
https://www.sioe.cn/yingyong/yanse-rgb-16/

This is the end of this article about the example of setting div background transparency. For more information about div background transparency, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!

Recommended Today

Swift advanced (XV) extension

The extension in swift is somewhat similar to the category in OC Extension can beenumeration、structural morphology、class、agreementAdd new features□ you can add methods, calculation attributes, subscripts, (convenient) initializers, nested types, protocols, etc What extensions can’t do:□ original functions cannot be overwritten□ you cannot add storage attributes or add attribute observers to existing attributes□ cannot add parent […]