Example of how to set div background transparent

There are two common ways to make div background transparent:

1. Set the opacity attribute to a value of 0~1, 0 for transparent and 1 for opaque. However, this method will also make the content on the div transparent.

The effect is as follows:

insert image description here

2. Set the background-color in rgba format. The format is: background-color:rgba(0,0,0,0~1), where 0 means transparent and 1 means opaque.

insert image description here

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 1-->
    <div class="tm1">Transparent div method 1, set the transparency through opacity, 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 transparency through rgba, the text on the div is not transparent: background-color:rgba(255,0,0,0.5);</div>
</div>
</body>
</html>

Here is another point to note:
The rgba() function uses the superposition of red®, green (G), blue (B), and transparency (A) to generate a variety of colors.

RGBA stands for Red, Green, Blue, Alpha (English: Red, Green, Blue, 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.
Transparency (A) takes values between 0 and 1, representing transparency.
You can search for rgba values on Baidu Encyclopedia.
Similar to:

insert image description here

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

This is the end of this article about examples of how to set div background transparency. For more relevant div background transparency content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: Importance of background color declaration when writing styles

>>: Detailed steps for manually configuring the IP address in Linux

vitrualBox+ubuntu16.04 install python3.6 latest tutorial and detailed steps

Example of how to set div background transparent

There are two common ways to make div background transparent:

vitrualBox+ubuntu16.04 install python3.6 latest tutorial and detailed steps

Vue implements student management function

Analyze the difference between querySelector and getElementById methods in JavaScript

Understand the use of CSS3's all attribute

Problems and solutions for MYSQL5.7.17 connection failure under MAC

Detailed explanation of the role of the new operator in Js

Detailed explanation of MySQL master-slave database construction method

MySQL 8.0.12 Simple Installation Tutorial

Summary of basic usage of CSS3 @media

Basic knowledge of load balancing and a simple example of load balancing using nginx

Recommend

Example code for implementing verification code login in SMS API in Node

HTML+CSS realizes scrolling to the element position to display the loading animation effect

Three ways to draw a heart shape with CSS

Mysql varchar type sum example operation

Detailed explanation of the implementation principle of MySQL transactions and Spring isolation levels

How to configure MGR single master and multiple slaves in MySQL 8.0.15

The advantages and disadvantages of nginx and lvs and their suitable usage environment

A detailed introduction to deploying RabbitMQ environment with docker

Detailed explanation of the use of Arguments object in JavaScript

7 major elements of web page redesign Share the 7 major elements of web page redesign

Detailed examples of Docker-compose networks

Detailed tutorial on installing ElasticSearch 6.x in docker

The Complete Guide to Grid Layout in CSS

Detailed steps for building, running, publishing, and obtaining a Docker image for the first time

Solution to Chinese garbled characters when operating MySQL database in CMD