Example of using CSS to achieve semi-transparent background and opaque text
|
This article introduces an example of how to use CSS to achieve the effect of semi-transparent background and opaque text. The details are as follows: The effect is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html{
background: #6a8db1;
}
.aside{
background-color:rgba(244,251,251,0.47);
border: 1px solid #FFFFFF;
width: 200px;
text-align: center;
color: #FFFFFF;
}
.aside div{
height: 55px;
border-bottom: 1px solid #FFFFFF;
line-height: 55px;
}
.aside div font{
font-weight: 800;
}
.aside div span {
font-weight: 800;
margin-left:18px;
}
</style>
</head>
<body>
<div class="aside">
<div>
<font>Holding Room 1</font>
<span>10 people</span>
</div>
<div>
<font>Holding Room 1</font>
<span>4 people</span>
</div>
<div>
<font>Holding Room 1</font>
<span>12 people</span>
</div>
<div>
<font>Holding Room 1</font>
<span>6 people</span>
</div>
<div>
<font>Holding Room 1</font>
<span>8 people</span>
</div>
</div>
</body>
</html>The color can be adjusted according to the palette
The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. |
<<: Detailed explanation of installing redis in docker and starting it as a configuration file
>>: The use of MySQL triggers and what to pay attention to
Recommend
How to elegantly implement the mobile login and registration module in vue3
Table of contents Preface Input box component lay...
Detailed code of the example of downloading the docker installation package from yum and installing it on an offline machine
1. On a networked machine, use the default centos...
How to use Vue cache function
Table of contents Cache function in vue2 Transfor...
MySQL 5.7.18 installation and configuration method graphic tutorial (CentOS7)
How to install MySQL 5.7.18 on Linux 1. Download ...
MySQL joint index effective conditions and index invalid conditions
Table of contents 1. Conditions for joint index f...
MySQL extracts Json internal fields and dumps them as numbers
Table of contents background Problem Analysis 1. ...
Analysis of uniapp entry-level nvue climbing pit record
Table of contents Preface Hello World image Set b...
24 Practical JavaScript Development Tips
Table of contents 1. Initialize the array 2. Arra...
Analysis and solution of the reasons why HTML external reference CSS files are not effective
As a front-end novice, I tinkered with the front-e...
Example sharing of anchor tag usage in HTML
Anchor tag usage: Linking to a specific location i...
How to set up ssh password-free login to Linux server
Every time you log in to the test server, you alw...
How to reset the initial value of the auto-increment column in the MySQL table
How to reset the initial value of the auto-increm...
Mysql dynamically updates the database script example explanation
The specific upgrade script is as follows: Dynami...
Basic knowledge of MySQL learning notes
View Database show databases; Create a database c...
HTML tags explained
HTML tags explained 1. HTML tags Tag: !DOCTYPE De...