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

Opaque content

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!