前端学习 -- Html&Css -- ie6 png 背景问题
2023-09-14 08:59:00 时间
在IE6中对图片格式png24支持度不高,如果使用的图片格式是png24,则会导致透明效果无法正常显示
解决方法:
1.可以使用png8来代替png24,即可解决问题,但是使用png8代替png24以后,图片的清晰图会有所下降;
2.使用JavaScript来解决该问题,需要向页面中引入一个外部的JavaScript文件,然后在写一下简单的JS代码,来处理该问题。
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
用上面这两个来处理png透明效果无法正常显示问题
使用:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="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> <body style="background-color: #bfa;"> <div class="box1"></div> <div class="box2"></div> <img src="img/3.png"/> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script> <script type="text/javascript"> DD_belatedPNG.fix("*"); </script> </body> </html>
效果:
github地址:https://github.com/soyoungboy/htmlCssStudy/blob/master/HelloHBuilder/BelatedPNG.html
相关文章
- cookie & session
- Java 容器 & 泛型:六、容器讲到为什么要使用泛型
- RMAN还原遭遇ORA-32006&ORA-27102错误
- 前端学习 -- Html&Css -- 框架集
- 前端学习 -- Html&Css -- 层级和透明度
- [Angular 2] Understanding Pure & Impure pipe
- 前端学习 -- Html&Css -- 条件Hack 和属性Hack
- [HTML 5] preventDefault() & defaultPrevented prop
- [Angular HTML] Overwrite input value, String.fromCharCode & input.selectionStart
- 错误1Files 的值“<<<<<<< .mine”无效。路径中具有非法字符。
- $(this).attr("checked",false);
- html中<li></li>中使用<br>和<li></li>外面使用<br>
- 缓存雪崩 & 缓存穿透
- PHP代码为什么不能直接保存HTML文件——>PHP生成静态页面教程
- K&R练习题6-1统计关键词出现的次数
- 前端基础 & 初识HTML
- Android 儿子Activity在启动过程中的流程组件 && 儿子Activity在一个新的进程组件启动过程
- Android打包 & Gradle用法
- centos安装python3/pip3项目所需的第三方模块(在线安装&&离线安装)
- 网页前端(Html)video播放m3u8(HLS)&Vue使用video.js播放m3u8