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:
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.
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: RGBA stands for Red, Green, Blue, Alpha (English: Red, Green, Blue, Alpha).
Color code comparison chart link: 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
Recommend
Comparison of the use of form element attributes readonly and disabled
1) Scope of application: readonly:input[type="...
Implementing Binary Search Tree in JavaScript
The search binary tree implementation in JavaScri...
Ideas and codes for realizing magnifying glass effect in js
This article example shares the specific code of ...
CSS3 category menu effect
The CSS3 category menu effects are as follows: HT...
In-depth explanation of binlog in MySQL 8.0
1 Introduction Binary log records SQL statements ...
mysql5.7.17.msi installation graphic tutorial
mysql-5.7.17.msi installation, follow the screens...
Detailed explanation of the process of Zabbix active, passive and web monitoring in distributed monitoring system
In the previous article, we learned about the net...
Steps to use autoconf to generate Makefile and compile the project
Preface Under Linux, compilation and linking requ...
Detailed explanation of nginx anti-hotlink and anti-crawler configuration
Create a new configuration file (for example, go ...
Sample code for implementing image drawer effect with CSS3
As usual, let’s first post the picture effect: Th...
Docker Compose practice and summary
Docker Compose can realize the orchestration of D...
Solution to the problem of a large number of php-cgi.exe processes on the server causing the CPU to occupy 100%
Optimize the fastcgi configuration file fcgiext.i...
Native JS to achieve cool paging effect
This article uses an example to share with you a ...
Summary of MySQL ALTER command knowledge points
When we need to change the table name or modify t...
Analysis of the difference between bold <b> and <strong>
All of us webmasters know that when optimizing a ...