源码网,源码论坛,源码之家,商业源码,游戏源码下载,discuz插件,棋牌源码下载,精品源码论坛

 找回密码
 立即注册
查看: 276|回复: 27

[CSS] ie6中png透明的方法示例(png背景透明)

[复制链接]

7万

主题

861

回帖

32万

积分

论坛元老

Rank: 8Rank: 8

积分
329525
发表于 2013-12-23 10:29:29 | 显示全部楼层 |阅读模式
ie6因为不兼容png-24的图片一直被开发人员所鄙视。由于市场决定了页面的存在的价值,所以ie6还是必须要兼容。下面介绍几种常用的解决办法:

由于游戏类官网在页面背景和装饰人物的设计上追求画丽且与游戏风格想匹配,这就给前端页面制作人员带来了很多的麻烦,一个页面的制作主要时间和精力花费在兼容ie6上,而

dd_belatedpng.js法

引入js文件


复制代码代码如下:
<!--[if IE 6]>
<script type="text/javascript" src="js/dd_belatedpng.js"></script>
<script>
DD_belatedPNG.fix('.pngfix');
</script>
<![endif]-->

然后对需要进行ie6下透明的元素进行class标注。

特点是在很大程度上能解决png-24的透明问题,但是也有几个问题比较明显。

1. 需要引入js文件。

2. 他会动态在png-24图像上包裹一层css为position:relative;的元素,使原有的position:absolute;的元素消失不见或出现其它意想不到的bug。

解决办法:在png-24的图像上再添加一层position:relative;的dom元素,或者不使用绝对定位或使用其它办法。

ie滤镜法

js办法失效后,可以用这种办法使图片透明。


复制代码代码如下:
background:url(/images/game_box.png) 0 0 no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/game_box.png',sizingMethod='crop');

当然这种办法的缺点:

1. 滤镜的性能问题一直是ie浏览器的一个瓶颈。
2. background-position 无法实现。

图片替换法

在不要求图片背景滚动的情况下,可以在高级浏览器里边使用png-24的图片,然后用截图工具抓取需要透明的区域,然后直接使用截图后的图片。

这种方法的优点是没有兼容性问题,而且在保证图片大小的情况下能正常显示,缺点就是操作比较复杂,而且截图也会使图片的颜色信息造成部分遗失。

浏览器区分法

还有一种办法是用js判断是ie6浏览后,添加不同的图片。根据浏览器的不同来使用不同的图片。

这个办法使用于,用户市场比较成熟的产品或界面,不考虑低端ie6浏览器使用者,但也保证在浏览器下能正常显示,只是图片的质量稍为差点罢了。

回复

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-8-19 21:03:31 | 显示全部楼层
很不错的玩意
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2022-10-22 16:42:30 | 显示全部楼层
怕怕怕怕怕怕怕怕怕怕怕怕怕怕
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

100

积分

注册会员

Rank: 2

积分
100
发表于 2022-12-11 23:21:59 | 显示全部楼层
哦哦哦哦哦哦哦哦哦
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-1-5 12:04:37 | 显示全部楼层
很不错的样子
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

124

积分

注册会员

Rank: 2

积分
124
发表于 2023-6-30 16:00:07 | 显示全部楼层
天天源码社区www.tiantianym.com
回复 支持 反对

使用道具 举报

0

主题

2万

回帖

55

积分

注册会员

Rank: 2

积分
55
发表于 2023-7-18 03:43:47 | 显示全部楼层
女生看了弄丢了卡萨诺的卡洛斯
回复 支持 反对

使用道具 举报

2

主题

2万

回帖

99

积分

注册会员

Rank: 2

积分
99
发表于 2023-10-18 22:53:21 | 显示全部楼层
额头额定法国队是范德萨
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2023-11-26 16:30:17 | 显示全部楼层
我要金豆金豆金豆
回复 支持 反对

使用道具 举报

0

主题

1万

回帖

0

积分

中级会员

Rank: 3Rank: 3

积分
0
发表于 2024-4-6 15:21:36 | 显示全部楼层
怕怕怕怕怕怕怕怕怕怕怕怕怕怕
回复 支持 反对

使用道具 举报

高级模式
B Color Image Link Quote Code Smilies

本版积分规则

手机版|小黑屋|网站地图|源码论坛 ( 海外版 )

GMT+8, 2024-12-4 04:01 , Processed in 0.079130 second(s), 24 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表