Solve the problem of css setting background transparent and text opaque_html/css_WEB-ITnose

Set the transparency of the element:

-moz-opacity:0.8; /*Set the transparency of the element in Firefox

filter: alpha(opacity=80); /*ie use filters to set transparency

But when we set the background transparency of a label, we often don’t want the text and images on the label to also become translucent.

For example:

opaque

div{-moz-opacity:0.3;filter:alpha(opacity=30);background:#000;width:500px;

height:500px;color:#F30; font-size:32px; font -weight:bold; }

It can be clearly seen that the text is also semi-transparent, which is an effect we don’t want to see.

In the past, I used absolute positioning to solve this problem, that is, the current p is not a child element of div.

opaque

like this The translucent effect of the div will not affect the element p. Finally, position p to the desired location.

But many times such tags are not very reasonable, and it is possible to waste a few more tags.

The following method can solve the above problem:

div{background:rgba(0,0,0,0.2) none repeat scroll !important ; /*Realize FF background transparency and text opacity*/

background:#000; filter:Alpha(opacity=20);/*Realize IE background transparency*/

width:500px; height:500px; color:#F30; font-size:32px; font-weight:bold;}

div p{ position:relative;}/*Make IE text opaque*/

In Firefox, we can directly use rgba color to solve the problem of sub-tags following translucency, but IE does not support it very well yet.

So we set a positioning attribute for labels that do not want to be transparent, and the problem is solved.

Text from: http://blog.163.com/l_lihanyu/blog/static/12003272320123185372127/