Home > Developer > Web Develop
PNG24 support for picture format is not high in IE6, if the picture format used is png24, it will cause the transparency effect not to display properly
Workaround:
1. Can use PNG8 to replace the PNG24, can solve the problem, but the use of Png8 instead of Png24, the picture will be a clear image of the decline;
2. Use JavaScript to solve the problem, you need to introduce an external JavaScript file to the page, and then write a simple JS code to handle the problem.
Dd_belatedpng_0.0.8a.js:http://www.dillerdesign.com/experiment/dd_belatedpng/dd_belatedpng_0.0.8a.js
Dd_belatedpng_0.0.8a-min.js:http://www.dillerdesign.com/experiment/dd_belatedpng/dd_belatedpng_0.0.8a-min.js
Using the above two to handle PNG transparency does not display the problem correctly
Use:
<!DOCTYPE HTML><HTML> <Head> <MetaCharSet= "UTF-8"> <title></title> <styletype= "Text/css">. Box1{width:200px;Height:200px;Background-image:URL (img/3.png);background-repeat:no-repeat; }. Box2{width:200px;Height:200px;Background-image:URL (img/4.png);background-repeat:no-repeat; } </style> </Head> <Bodystyle= "Background-color: #bfa;"> <Divclass= "Box1"></Div> <Divclass= "Box2"></Div> <imgsrc= "Img/3.png"/> <Scripttype= "Text/javascript"src= "Js/dd_belatedpng_0.0.8a-min.js"></Script> <Scripttype= "Text/javascript">Dd_belatedpng.fix ("*"); </Script> </Body></HTML>
Effect:
GitHub Address: https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/BelatedPNG.html
Front-end learning--html&css--IE6 png background problem
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
