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

Example of how to set div background transparent

There are two common ways to make div background transparent:

How to hide the version number in Nginx

React uses emotion to write CSS code

How to install a virtual machine with Windows services on Mac

Notes on MySQL case sensitivity

HTML Frameset Example Code

Explanation of the concept and usage of Like in MySQL

Object-Oriented Programming with XHTML and CSS

A brief discussion on the problem of Docker run container being in created state

Design Theory: Text Legibility and Readability

Solution to installing vim in docker container

Recommend

jQuery+h5 realizes the nine-square lottery special effect (front-end and back-end code)

MySQL 8.0 can now handle JSON

Use of Linux telnet command

JavaScript to achieve custom scroll bar effect

MySQL 5.7 mysql command line client usage command details

CSS3 animation: the image gradually gets bigger when the mouse is on it and gradually shrinks when the mouse leaves it

Implementation of k8s node rejoining the master cluster

Explanation of nginx load balancing and reverse proxy

Detailed process of configuring NIS in Centos7

Detailed explanation of Vue component reuse and expansion

WeChat Mini Programs are shared globally via uni-app

Detailed explanation of how to use the vue3 Teleport instant movement function

The correct way to migrate MySQL data to Oracle

The practical process of login status management in the vuex project

MySQL trigger syntax and application examples