How to solve the problem of filtering text at the same time by CSS Filter

This article mainly describes how to solve the CSS filter at the same time filter text problems, has a certain reference value, now share to everyone, the need for friends can refer to

First friends with CSS filter may encounter such a problem: to P set on Filter:alpha (OPACITY=50); After the filter, the text inside is also translucent, in this case, what should we do?

After I consulted a large amount of data, experiment N times finally found a compatible with IE6,IE7,IE8 and Firefox CSS transparent filter method, and see I illustrate.

HTML code:

<p id= "Body" > <span>< Dragon's Blog > Troubleshoot CSS filters while filtering text </span> </p>

CSS code:

<style type= "Text/css" > #body {border:1px solid #c00; Background-color:rgba (212,0,0,0.5); background: #f00 \9; Filter:alpha (opacity=10); width:500px; margin:40px Auto; line-height:200%; font-size:14px; padding:14px;} </style>

Such code does not solve the problem of filtering text, want to not filter text, you must add this line of code in the CSS code:

#body *{position:relative;}

The asterisk is to let IE6 and IE7 execution, Firefox and IE8 do not, Firefox itself does not support IE unique filter function, so there is no need to add asterisks, how? It's simple.

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!