CSS3 effect of transparent text opacity in background

This article mainly introduces the CSS3 implementation of the background transparent text Opaque example code of the relevant information, content is very good, and now share to everyone, but also for everyone to do a reference.

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

requirements. png

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:


The background is transparent and the text is transparent. png

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) with 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:


Transparent background, opaque text. png

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 p in the same position, a translucent background p, a text p, the same can solve the problem, but need to write absolute positioning or negative margin, and appear empty content of P, this method in some scenarios will appear slightly complex, As shown in the example below, there is a specific problem specific analysis in the actual demand scenario.


The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!