CSS3 background transparent, text opaque

Recently encountered a requirement to display text with a translucent background on the picture, as shown in the following:

After seeing this requirement, the first reaction is to use the opacity in CSS3 to set the transparency of the element.

<! DOCTYPE html>

The effect is as follows:


This seems to satisfy the demand, but not perfect, after setting the opacity, the whole element is translucent, resulting in the text appears blurred, such a solution is not advisable.

In fact, the implementation of transparent CSS method is not only set opacity one way. There are two other kinds:

• CSS3 Rgba (red, green, blue, alpha), alpha values from 0 to 1, such as Rgba (255,255,255,0.8)
• IE exclusive filter filter:alpha (OPACITY=X), x value from 0 to 100, such as Filter:alpha (OPACITY=80)

Here I have adopted the method of setting Rgba:

<! DOCTYPE html>

The effect is as follows:


After this setting, the text appears much clearer.

Summary

In fact, to achieve this demand, not only this kind of thinking, you can also use two div in the same position, a semi-transparent background div, a text div, the same can solve the problem, but need to write absolute positioning or negative margin, and appear empty content div, This approach is slightly more complex in some scenarios, as shown in the example below, so there are specific problems to be analyzed in the actual requirements scenario.

CSS3 background transparent, text opaque