CSS implementation background image translucent content opaque code sharing

This article mainly and everyone introduced the pure CSS to achieve the background image translucent content of the method, small series feel very good, and now share to everyone, but also for everyone to do a reference, hope to help everyone.

Recently made a landing interface, suddenly want to use this background image transparent, and the content of the effect of opaque, here I say one of my two ideas.

Effect Show

Translucent

Not transparent

Common failure practices

The most common practice is to set the elements of the opacity, this set out the effect is the content and background are translucent, seriously affect the visual effect.

There is also the setting of Background-color:rgba (), which only sets the transparency of the background color.

Correct posture

I think of two methods, the first one is to take advantage of pseudo-elements:: Before, we do this by adding a background to the pseudo-element and setting the pseudo-element's background transparency

<! DOCTYPE html> 


<p class= "bg" >    <p class= "Content" >    some content    </p></p>
This can also achieve the same effect.