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:

CSS3's rgba(red, green, blue, alpha), alpha's value ranges from 0 to 1, such as rgba(255,255,255,0.8)
IE exclusive filter filter:Alpha(opacity=x), the value of x ranges from 0 to 100, such as filter:Alpha(opacity=80)

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

How to implement gzip compression in nginx to improve website speed

Example code for implementing background transparency and opaque text with CSS3

How to implement gzip compression in nginx to improve website speed

Detailed explanation of how to detect and prevent JavaScript infinite loops

Differences between ES6 inheritance and ES5 inheritance in js

MySQL database development specifications [recommended]

Nginx sample code for implementing dynamic and static separation

JS code to achieve page switching effect

How to build gitlab on centos6

Install mysql5.7.17 using RPM under Linux

Tutorial on deploying springboot package in linux environment using docker

Teach you how to implement Vue3 Reactivity

Recommend

CSS implements six adaptive two-column layout methods

How to create a basic image of the Python runtime environment using Docker

Detailed configuration steps for installing Linux (CentOS) under VMware virtual machine

Example of how to configure cross-domain failure repair in nginx

JS+CSS to realize dynamic clock

Simple writing of MYSQL stored procedures and functions

This article summarizes the specific use of CSS two-column layout and three-column layout

Practical record of MySQL 5.6 master-slave error reporting

Detailed tutorial on installing and using Kong API Gateway with Docker

MySQL query learning basic query operations

Mysql online recovery of undo table space actual combat record

Implementing long shadow of text in less in CSS3

Detailed explanation of selinux basic configuration tutorial in Linux

8 essential JavaScript code snippets for your project

Implementing the page turning effect through sliding and the click event problem on the mobile terminal