Example of how to achieve semi-transparent background image and opaque content in CSS3

Example of how to achieve semi-transparent background image and opaque content in CSS3

I encountered this problem when I was making the login page for my previous blog. I suddenly wanted to use the effect of a transparent background image and opaque content. Here I will talk about my two ideas.

Effect display:

Content is semi-transparent

insert image description here

Opaque content

insert image description here

The most common approach is to set the opacity of the element. This setting results in both the content and the background being semi-transparent, which seriously affects the visual effect and does not achieve the above effect.

Method 1: Set background-color:rgba(). This method can only set the transparency of the background color.

If the background is a picture, the above method will not apply. Here are two methods:

The first one is to use the pseudo-element :: before. We do this by adding a background to the pseudo-element and setting the background transparency of the pseudo-element.

.login_box::before{
            content:"";
           
            background-image:url(images/one.jpg);
            opacity:0.5; //Transparency setting z-index:-1;
            background-size:500px 300px;
            width:500px; 
            height:300px;
            position:absolute;
            //Be sure to set position:absolute so that you can set the z-index so that the background is in the next layer of the content top:0px;
            left:0px;
            border-radius:40px;
        }
         .login_box{
            position:fixed;
            left:50%;
            top:200px;
            width:500px;
            height:300px;
            margin-left:-250px;
            border-radius:40px;
            box-shadow: 10px 10px 5px #888;
            border:1px solid #666;
 
            text-align:center;
        }

The method is similar to pseudo-elements. We can set different divs, place the content in the divs inside, set the background of the parent div, and then set the transparency. The layout is as follows:

<div class="bg">
    <div class="content">
    Contents
</div>

This can also achieve the same effect

This is the end of this article about the example of how to achieve semi-transparent background images with opaque content in CSS3. For more related CSS3 background images with semi-transparent content and opaque content, please search 123WORDPRESS.COM’s previous articles or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!

<<:  uni-app WeChat applet authorization login implementation steps

>>:  How to set the height of the autosize textarea in Element UI

Recommend

Summary of fragmented knowledge of Docker management

Table of contents 1. Overview 2. Application Exam...

Brief analysis of the various versions of mysql.data.dll driver

Here is the mysql driver mysql.data.dll Notice: T...

How to create a table in mysql and add field comments

Directly post code and examples #Write comments w...

Vue implements click feedback instructions for water ripple effect

Table of contents Water wave effect Let's see...

The connection between JavaScript and TypeScript

Table of contents 1. What is JavaScript? 2. What ...

Some "pitfalls" of MySQL database upgrade

For commercial databases, database upgrade is a h...

A simple way to put HTML footer at the bottom of the page

Requirement: Sometimes, when the page content is ...

Summary and practice of javascript prototype chain diagram

Table of contents Prototype chain We can implemen...

SQL Optimization Tutorial: IN and RANGE Queries

Preface "High Performance MySQL" mentio...

Detailed tutorial on installing MYSQL under WINDOWS

1. Download the installation package -Choose the ...