png24在ie下支持透明。终于找到下面的可行办法:

我们知道 IE6 是不支持透明的 PNG-24 的,这无疑限制了网页设计的发挥空间。

然而整个互联网上解决这个 IE6 的透明 PNG-24 的方案也是多不胜数,从使用 IE 特有的滤镜或是使用透明 GIF 替代。但是这些方法都有一个缺点,就是不支持 CSS 中 backgrond-position 与 background-repeat 。

而我今天介绍 DD_belatedPNG ,只需要一个理由,就是它支持 backgrond-position 与 background-repeat ,这是其他 js 插件不具备的.同时 DD_belatedPNG 还支持 a:hover 伪类属性,以及 img 标签。具体有关于 DD_belatedPNG 的详细介绍请阅览官方文档:http://www.dillerdesign.com/experiment/DD_belatedPNG/ 这里就不提供翻译了。因为本人是英语界的菜鸟而不是泰斗,呵呵。

接下来我给大家介绍下它的使用方法,其实方法很简单见如下步骤:

1.首先下载调用该 js 插件(DD_belatedPNG)如下地址:

0.0.8a.js (官方未压缩版本, ~12Kb)
0.0.8a-min.js (官方压缩版, ~7Kb)

2.之后在使用 PNG-24 图片页面中的 head 标签里引用代码如下:

<!--[if IE 6]>
<script src="../js/DD_belatedPNG.js" type="text/javascript"></script>
<script type="text/javascript">DD_belatedPNG.fix('*');</script>
<![endif]-->

引用函数是 DD_belatedPNG.fix() , 括号里分别填写应用 PNG-24 的 CSS 选择器(可使用ID选择器和类选择器)和应用类型(分为 img 标签和 background 属性两种)。

如

<script type="text/javascript">
DD_belatedPNG.fix('#box, img');
</script>

或者

<script type="text/javascript">
DD_belatedPNG.fix('.header, background');
</script>

等,这些可以简写成

<script type="text/javascript">
DD_belatedPNG.fix('#box-one, .header, img, background');
</script>

在或者像本例子中直接使用 * 号,表示应用所有 css 选择器及 xhtml 标签。

<script type="text/javascript">
DD_belatedPNG.fix('*');
</script>

okay,有关 DD_belatedPNG 的 js 插件的介绍和使用就这么多,期待大家来分享更多的应用方法!

DD_belatedPNG,解决 IE6 不支持 PNG-24 绝佳解决方案的更多相关文章

  1. 解决ie6不支持position: fixed;导致无法滚动的办法

    <div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #006 ...

  2. 解决IE6不支持position:fixed属性

    最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...

  3. 解决IE6不支持position:fixed;的问题

    在网页设计中,时常要用到把某个元素始终定位在屏幕上,即使滚动浏览器窗口也不会发生变化. 一般我们会使用position:fixed来进行绝对固定,但IE6并不支持position:fixed属性,所以 ...

  4. 解决IE6不支持fixed

    /* IE6 是不支持position:fixed的,解决如下*/.right-bar{ _position:absolute;_top:expression(eval(document.docume ...

  5. 完美解决IE6不支持position:fixed的bug

    示例代码: <!DOCTYPE html><html><head><meta http-equiv="Content-Type" cont ...

  6. js完美解决IE6不支持position:fixed的bug

    详细内容请点击 <!DOCTYPE html><html><head><meta http-equiv="Content-Type" co ...

  7. 两种解决IE6不支持固定定位的方法

    有两种让IE6支持position:fixed1.用CSS执行表达式 *{margin:0;padding:0;} * html,* html body{ background-image:url(a ...

  8. 解决IE6不支持position:fixed的bug

    /*完整代码 */ /* 除IE6浏览器的通用方法 */ .ie6fixedTL { position: fixed; left:; top:; } .ie6fixedBR { position: f ...

  9. DD_belatedPNG解决IE6下PNG不透明问题

    使用方法: 首先下载JS文件:http://dillerdesign.com/experiment/DD_belatedPNG/ 之后在页面中引用代码: <!--[if IE 6]>< ...

随机推荐

  1. ERP调研之 对话

    开卷语: 2009年8月6号,A公司ERP项目顺利启动,按照项目进度的安排,项目组成员立即投入到紧张而又忙碌的的业务调研之中.这次为期3周的业务调研面向企业所有业务部门,包括产品部门.采购部门.计划部 ...

  2. ubuntu 中 ssh连接用UTF-8

    在ubuntu中,文本模式的终端默认情况下是无法显示中文的,尽管有些解决办法,但通常情况下都不是很如意.这时,我们可能会采用英文终端,但当我们用ssh连接的时候,又想用中文的.每次都改是个麻烦事.于是 ...

  3. CSS构造表单

    结构化表单布局 <head> <meta http-equiv="Content-Type" content="text/html; charset=G ...

  4. [ionic开源项目教程] - 第4讲 通Service层获取数据列表

    第4讲:通Service层获取数据列表 上一讲中页面的基本架构已完成,这一讲介绍如何通过service层从服务器请求数据,在通过controller层为载体,显示到视图层. 1.在services.j ...

  5. 基于Flume的美团日志收集系统(二)改进和优化

    在<基于Flume的美团日志收集系统(一)架构和设计>中,我们详述了基于Flume的美团日志收集系统的架构设计,以及为什么做这样的设计.在本节中,我们将会讲述在实际部署和使用过程中遇到的问 ...

  6. android 自定义组件-带图片的textView

    1. 定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <decla ...

  7. Python [Leetcode 121]Best Time to Buy and Sell Stock

    题目描述: Say you have an array for which the ith element is the price of a given stock on day i. If you ...

  8. (一) 从零开始搭建Spark Standalone集群环境搭建

    本文主要讲解spark 环境的搭建 主机配置  4核8线程,主频3.4G,16G内存 虚拟环境: VMWare 虚拟环境系统:Ubuntu 14.10 虚拟机运行环境: jdk-1.7.0_79(64 ...

  9. InnoDB 引擎独立表空间 innodb_file_per_table

    使用过MySQL的同学,刚开始接触最多的莫过于MyISAM表引擎了,这种引擎的数据库会分别创建三个文件:表结构.表索引.表数据空间.我们可以将某个数据库目录直接迁移到其他数据库也可以正常工作.然而当你 ...

  10. 【ASP.NET Web API教程】1.1 第一个ASP.NET Web API

    Your First ASP.NET Web API (C#)第一个ASP.NET Web API(C#) By Mike Wasson|January 21, 2012作者:Mike Wasson ...