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! |
<<: uni-app WeChat applet authorization login implementation steps
>>: How to set the height of the autosize textarea in Element UI
The concept of relative path Use the current file...
Table of contents 1. Overview 2. Application Exam...
Table of contents 1. Page Layout 2. Image upload ...
Here is the mysql driver mysql.data.dll Notice: T...
Directly post code and examples #Write comments w...
Table of contents Water wave effect Let's see...
Table of contents 1. What is JavaScript? 2. What ...
For commercial databases, database upgrade is a h...
Table of contents Introduction to Samba Server Sa...
Everything needs a foundation. To build a house, ...
Requirement: Sometimes, when the page content is ...
Table of contents Prototype chain We can implemen...
Preface "High Performance MySQL" mentio...
MySQL 8.0 compressed package installation method,...
1. Download the installation package -Choose the ...