IE7+background transparent text opaque and super simple implementation method

Author：Eve Cole Update Time：2025-02-03 09:48:02

If you are still worried about the incompleteness of the transparent text of the background, I suggest you take a look. Of course, I have given up IE6, so don't say that no PNG8 pictures are not effective under IE6, of course you can also use filters. I don't recommend using filters. Because this may have other problems! (If you can't click and wait, etc.) The most afraid of the front end is the bug, especially IE6. Roll out IE6!

The core of this article is to use PNG32 transparent pictures to make the background and then lay background. In this way, there will be no transparent text in the background. It is super simple to do so!

The picture only needs to adjust the transparency.

Just save the transparency of the picture to 20%in PSD to PNG.

(Do not set the mode to gray. This will become PNG8. And there is no transparency.)

The background is transparent and the text is opaque. Ha ha. IE 6 is getting out! Support: IE7.0+/FF3.0+/Opera10+/Chrome/Safari. Both test passed.

The effect map is as follows:

The complete code is as follows:

Copy code code as follows:

<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd ">

<head>

<Title> IE7+Background transparent, text opaque and super simple method </title>

<Style>

p {margin: 0; padding: 0;}

.bg {width: 280px; padding: 5px; margin: 10px 0 10px;}

.bg1 {background:#000; color: #fff;}

.bg2 {background:#f60;}

.com {background: url (http://images/css_bg.png) Repeat 0 0; border: 1px solid #eee; border-radius: 5px; iGHT: 20px; }

</style>

</head>

<body>

<div>

<div> <p> The background is transparent and the text is opaque. Ha ha. IE 6 Get Oks <br/> Support: <br />Ie7.0+/ff3.0+/opera10+/chrome/safari <br /> All test passes. The transparency is: 20%</p> </div>

</div>

<div>

</div>

</body>

</html>