Originally it was just a png transparent picture, which is easy to solve under IE. I have also tried many methods, including js method, filter css method, etc., but I feel that overall it is not perfect, and if I use the Sprites method at the same time , it’s not that simple and easy.
Finally, I found that using the htc method to embed into css files can basically solve most transparency problems at once.
This method has been introduced by many people, but because the page is in English, few people have translated it, and few people will use it.
This method is introduced in detail below:
The demo address of this method itself: http://www.twinhelix.com/css/iepngfix/demo/
(As I said, it’s all in English, don’t worry)
Can be solved by:
1. Use the "img" tag to add the png transparent image to the page
2. Use background to add png transparent background in css (supports multiple versions)
3. Some versions of the background png are transparent and need to be solved by adding a js to the current page.
Download file package: http://www.twinhelix.com/css/iepngfix/iepngfix.zip
1. After downloading and unzipping, there will be many files, among which there are 3 files we need to use:
iepngfix.htc, blank.gif, iepngfix_tilebg.js
2. You can transfer them to the corresponding css, js and images directories respectively. Of course, you can also create a new folder, such as a folder named: iepng, and transfer them to it.
3. Add the first sentence of code. This is the format added in the html file. Don’t forget to modify the path of the htc file. If you are afraid of errors, directly use the path relative to the root directory, such as /iepng/iepngfix.htc. This generally does not work. error, of course you can also add behavior: url (iepngfix.htc) to your reset.css file
| <style type="text/css"> img, div { behavior: url(iepngfix.htc); } </style> |
4. Use Notepad or a similar tool to open the iepngfix.htc file and replace the file path of blankImg with your own, such as /iepng/blank.gif, according to your actual situation.
| IEPNGFix.blankImg = '/images/blank.gif'; |
5. Add the following js calling code to the "head" of the required page (this step is not necessary. If your include in the head part is called uniformly, it is recommended to add this sentence)
| <script type="text/javascript" src="iepngfix_tilebg.js"></script> |
After the above steps, you can basically achieve the transparent effect of png under IE.