Example code for implementing background transparency and opaque text with CSS3
|
Recently, I encountered a requirement to display text with a semi-transparent background on an image. The effect is as shown below:
Requirements.png After seeing this requirement, the first reaction is to use opacity in CSS3 to set the transparency of the element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Transparent background, transparent text</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 400px;
background: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
.demo {
position: absolute;
width: 260px;
height: 60px;
top: 260px;
line-height: 60px;
text-align: center;
background-color: black;
opacity: 0.5;
}
.demo p {
color: #FFF;
font-size: 18px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<div class="demo">
<p>2018 World Cup has opened: 10 days</p>
</div>
</div>
</body>
</html>
The effect is as follows:
Background is transparent, text is also transparent.png This seems to meet the needs, but it is not perfect. After setting the opacity, the entire element becomes translucent, causing the text to appear blurry. This solution is not advisable. In fact, setting opacity is not the only way to achieve transparency in CSS. There are two other types:
Here I use the method of setting rgba:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Background transparent, text opaque</title>
<style>
* {
padding: 0;
margin: 0;
}
.container {
width: 600px;
height: 400px;
background: url('https://img1.dongqiudi.com/fastdfs3/M00/18/56/ChOxM1stHByARuNmAAGsJDKXtuM269.jpg') no-repeat;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-position: center 0;
}
.demo {
position: absolute;
width: 260px;
height: 60px;
top: 260px;
line-height: 60px;
text-align: center;
background-color: rgba(0,0,0,0.5);
}
.demo p {
color: #FFF;
font-size: 18px;
font-weight: 600;
}
</style>
</head>
<body>
<div class="container">
<div class="demo">
<p>2018 World Cup has opened: 10 days</p>
</div>
</div>
</body>
</html>
The effect is as follows:
Background transparent, text opaque.png After this setting, the text appears much clearer. summary In fact, there is not only one way to achieve this requirement. You can also use two DIVs in the same position, one with a semi-transparent background DIV and the other with text DIV. This can also solve the problem, but it requires absolute positioning or negative margin, and a DIV with empty content. This method may appear slightly complicated in some scenarios, as shown in the following example, so specific problems must be analyzed in actual demand scenarios.
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. |
<<: Docker-compose tutorial installation and quick start
>>: Full analysis of web page elements
Recommend
Solution to the problem of session failure caused by nginx reverse proxy
A colleague asked for help: the login to the back...
MySQL 8.0.11 installation and configuration method graphic tutorial
The installation and configuration methods of MyS...
CSS World--Code Practice: Image Alt Information Presentation
Using the <img> element with the default sr...
Implementation of MySQL joint index (composite index)
Joint Index The definition of the joint index in ...
MySQL changes the default engine and character set details
Table of contents 1. Database Engine 1.1 View dat...
How to automatically backup the script for Linux servers (mysql, attachment backup)
1. Create the backup.sh script file #!/bin/sh SOU...
Detailed explanation of MySQL transaction processing usage and example code
MySQL transaction support is not bound to the MyS...
This article helps you understand PReact10.5.13 source code
Table of contents render.js part create-context.j...
Vue mobile terminal realizes finger sliding effect
This article example shares the specific code for...
Vue.js implements image switching function
This article shares the specific code of Vue.js t...
Analysis and treatment of scroll bars in both HTML and embedded Flash
We often encounter this situation when doing devel...
React Class component life cycle and execution order
1. Two ways to define react components 1. Functio...
MySQL5.7 master-slave configuration example analysis
MySQL5.7 master-slave configuration implementatio...
Detailed explanation of the binlog log analysis tool for monitoring MySQL: Canal
Canal is an open source project under Alibaba, de...
Introduction to JWT Verification Using Nginx and Lua
Table of contents Preface Lua Script nignx.conf c...