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
Summary of the use of TypeScript in React projects
Preface This article will focus on the use of Typ...
Six inheritance methods in JS and their advantages and disadvantages
Table of contents Preface Prototype chain inherit...
There is an extra blank line after the html page uses include to import the php file
The method found on the Internet works The footer ...
Implementing calculator functions with WeChat applet
This article is a simple calculator written using...
HTML drawing user registration page
This article shares the specific implementation c...
Sample code for programmatically processing CSS styles
Benefits of a programmatic approach 1. Global con...
Detailed usage of MYSQL row_number() and over() functions
Syntax format: row_number() over(partition by gro...
How to backup MySQL regularly and upload it to Qiniu
In most application scenarios, we need to back up...
Implementation code for taking screenshots using HTML and saving them as local images
The specific code is as follows: <!DOCTYPE htm...
Specific usage of fullpage.js full screen scrolling
1.fullpage.js Download address https://github.com...
Introduction to partitioning the root directory of Ubuntu with Vmvare virtual machine
Table of contents Preface Rationale Procedure 1. ...
The difference between absolute path and relative path in web page creation
1. Absolute path First of all, on the local compu...
JavaScript to implement retractable secondary menu
The specific code for implementing the retractabl...
Example of how to set WordPress pseudo-static in Nginx
Quoting Baidu's explanation of pseudo-static:...
Detailed explanation of how to select all child elements using CSS
How to recursively select all child elements usin...