• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >CSS > ie6中png透明的方法示例(png背景透明)

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

作者:佚名 字体:[增加 减小] 来源:互联网 时间:2017-08-06

本文主要包含png背景透明,ie6,png透明等相关知识,佚名 希望在学习及工作中可以帮助到您

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

dd_belatedpng.js法

引入js文件


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

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

1. 需要引入js文件。

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

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

ie滤镜法

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


当然这种办法的缺点:

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

图片替换法

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

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

浏览器区分法

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

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

您可能想查找下面的文章:

  • ie6中png透明的方法示例(png背景透明)
  • PNG背景透明在网页设计中的运用

相关文章

  • 2017-08-06font-family中文字体代码示例
  • 2017-08-06css 字体设置(不同浏览器设置效果)
  • 2017-08-06图片下面出现空白像素BUG的常用解决方法归纳
  • 2017-08-06使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
  • 2017-08-06网页设计经验之杜绝设计中的视觉噪音(图文)
  • 2017-08-06一款恶搞头像特效的制作过程 利用css3和jquery
  • 2017-08-06div+css样式表的id和class常用命名规则
  • 2017-08-06使用CSS3在触屏上为按钮实现激活效果
  • 2017-08-06全面了解link与import方式的区别
  • 2017-08-06IE8样式不正确显示问题

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 制作高效可维护组件化的CSS代码
    • CSS3媒体查询(Media Queries)介绍
    • HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
    • input 按钮在IE下显现不一致的兼容问题
    • IE6下图片下方有空间距的多种解决方法
    • CSS3 transform的skew属性值图文详解
    • css中使用ul li ul li ul li ul li 实现四层级联菜单
    • Web页面中八种创建多列等高(等高列布局)的实现技术
    • 浅谈CSS中的OOCSS编程方式
    • CSS实现背景图尺寸不随浏览器缩放而变化的两种方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有