Set the transparency of an element: -moz-opacity:0.8; /* Set element Transparency filter:alpha (opacity=80) in Firefox; /*ie using filters to set transparency But when we set the transparency of the background on a label, we don't want the text image on that label to become translucent. such as: <div><p> opaque </p></div> div{-moz-opacity:0.3;filter:alpha (opacity=30 ); background: #000; Width:500px; height:500px;color: #F30; font-size:32px; Font-weight:bold; } can clearly see the text is also translucent, this is the effect we do not want to see. I used to be the absolute location of the method to solve this problem, that is, the present p is not a sub-element of the Div. <div></div> <p> opaque </p> The translucent effect of the div will not affect the element p. Finally, the p is positioned to the desired location. But a lot of times this kind of label is not very reasonable, 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;/* Achieve FF background transparent, text opaque */ Background: #000; Filter:alpha (OPACITY=20);/* Implement IE background transparent */ width:500px; height:500px; Color: #F30; font-size:32px; Font-weight:bold;} div p{position:relative;} /* Implement IE opaque */ Firefox we can use the RGBA color directly to solve the problem of sub-label with translucent, but IE is not able to support very well. So we do not want to be transparent label set a positioning property, the problem can be solved.
Original link: http://blog.163.com/l_lihanyu/blog/static/12003272320123185372127/
CSS background transparent text opaque
