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
Use CSS3 background control properties + color transition to achieve gradient effect
css3 background image related Compatibility: IE9+...
What is a MySQL tablespace?
The topic I want to share with you today is: &quo...
jQuery treeview tree structure application
This article example shares the application code ...
9 code optimization tips to improve website usability that webmasters should pay attention to
1. Add alternative text to your logo This has two...
Detailed explanation of CSS style sheets and format layout
Style Sheets CSS (Cascading Style Sheets) is used...
A brief introduction to protobuf and installation tutorial in Ubuntu 16.04 environment
A brief introduction to protobuf Protobuf is Goog...
Tutorial on installing AutoFs mount service under Linux
Whether it is Samba service or NFS service, the m...
Graphical instructions for uploading and downloading files to a remote Linux host based on SecureCRT
Sometimes it is slow to download large network fi...
Zabbix's psk encryption combined with zabbix_get value
Since Zabbix version 3.0, it has supported encryp...
Detailed explanation of Docker Swarm service orchestration commands
1. Introduction Docker has an orchestration tool ...
View the dependent libraries of so or executable programs under linux
View the dependent libraries of so or executable ...
The front end creates and modifies CAD graphics details through JavaScript
Table of contents 1. Current situation 2. Create ...
Two simple ways to remove text watermarks from web pages
<br /> When we browse certain websites and s...
Input file custom button beautification (demo)
I have written such an article before, but I used...