HTML&CSS基础-修复IE6对png24支持度不高的案例

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.IE6对png24支持度不高，则会导致透明度无法正常显示

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>ie6png的修复</title>

        <style type="text/css">

            .box1{

                width: 200px;

                height: 200px;

                background-image: url(img/05.png);

                background-repeat: no-repeat;

            }

        </style>

    </head>

    <body>

        <!--

            在IE6中对图片格式png24支持度不高，如果使用图片格式是png24，则会导致透明度无法正常显示。

            解决方案一:

                可以使用png8来代替png24(使用PS工具转一下格式即可)，即可解决问题，但是使用png8代替png24以后，图片的清晰度会有所下降。

            解决方案二:

                使用JavaScript来解决该问题，需要向页面引入一个外部的JavaScript文件，然后再写一下简单的JS代码，来处理问题。

                大致步骤如下:

                    在body标签的最后引入外部的JS文件

                    再创建一个新的script标签，并且编写一些JS代码。

        -->

        <div class="box1"></div>

        <img src="img/05.png" />

    </body>

</html>

2>.浏览器打开以上代码渲染结果

二.修复IE6对png24支持度不高的案例

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>ie6png的修复</title>

        <style type="text/css">

            .box1{

                width: 200px;

                height: 200px;

                background-image: url(img/05.png);

                background-repeat: no-repeat;

            }

        </style>

    </head>

    <body>

        <!--

            在IE6中对图片格式png24支持度不高，如果使用图片格式是png24，则会导致透明度无法正常显示。

            解决方案一:

                可以使用png8来代替png24(使用PS工具转一下格式即可)，即可解决问题，但是使用png8代替png24以后，图片的清晰度会有所下降。

            解决方案二:

                使用JavaScript来解决该问题，需要向页面引入一个外部的JavaScript文件，然后再写一下简单的JS代码，来处理问题。

                大致步骤如下:

                    在body标签的最后引入外部的JS文件

                    再创建一个新的script标签，并且编写一些JS代码。

        -->

        <div class="box1"></div>

        <img src="img/05.png" />

        <!--

            以下代码只会再IE6中执行，其它浏览器无效。

            <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>:

                表示引入修复IEpng24的js文件。

            <script type="text/javascript">DD_belatedPNG.fix("div,img");</script>:

                表示调用JS的代码来修复"div"和img标签中引用的png24图片，如果由多个标签就指定相应的标签类型，并不推荐使用"*"号来指定所有标签,最好显式指定。

        -->

        <!--[if IE 6]>

            <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script>

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

        <![endif]-->

    </body>

</html>

2>.浏览器打开以上代码渲染结果

ElasticSearch的插件（Plugins）介绍的更多相关文章

  1. 03_Elasticsearch如何安装以及相关插件的介绍

    03_Elasticsearch如何安装以及相关插件的介绍 elasticsearch -d (-d参数是为了让服务后台运行) Elasticsearch 目录结构: 文件夹 作用 /bin 运行El ...

  2. Elasticsearch安装（四）， elasticsearch head 插件安装和使用。

    安装方式如下: 一.安装Elasticsearch-Head 1.插件安装方式(推荐) #在Elasticsearch目录下 $/bin/plugin -install mobz/elasticsea ...

  3. 【转】Eclipse插件大全介绍及下载地址

    转载地址:http://developer.51cto.com/art/200906/127169.htm 尚未一一验证. eclipse插件大全介绍,以及下载地址 Eclipse及其插件下载网址大全 ...

  4. Xcode Alcatraz插件管理介绍和使用

    Xcode Alcatraz插件管理介绍和使用http://www.jianshu.com/p/7a2484123bf6 1.简介 Alcatraz是一个能帮你管理Xcode插件丶模版及颜色配置的工具 ...

  5. ElasticSearch head 插件安装

    head 客户端可以很方便在上面创建索引,类型,文档,还有查询,使用它管理elasticsearch 提高效率. 在安装head 客户端之前必须安装node.js 环境,因为它是用node.js 编写 ...

  6. Vue插件plugins的基本操作

    前面的话 本文将详细介绍Vue插件plugins的基本操作 开发插件 插件通常会为 Vue 添加全局功能.插件的范围没有限制——一般有下面几种: 1.添加全局方法或者属性,如: vue-custom- ...

  7. Elasticsearch之插件扩展

    Elasticsearch之插件介绍及安装 Elasticsearch之head插件安装之后的浏览详解 Elasticsearch之kopf插件安装之后的浏览详解 Elasticsearch-2.4. ...

  8. Elasticsearch环境搭建和介绍（Windows）

    一.Elasticsearch介绍和安装 1.1 介绍  Elastic Elastic官网:https://www.elastic.co/cn/ Elastic有一条完整的产品线:Elasticse ...

  9. Elasticsearch入门教程(一)：Elasticsearch及插件安装

    原文:Elasticsearch入门教程(一):Elasticsearch及插件安装 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:h ...

  10. Cordova各个插件使用介绍系列（六）—$cordovaDevice获取设备的相关信息

    详情请看:Cordova各个插件使用介绍系列(六)—$cordovaDevice获取设备的相关信息 在项目中需要获取到当前设备,例如手机的ID,联网状态,等,然后这个Cordova里有这个插件可以用, ...

随机推荐

  1. Spring 使用介绍（十三）—— Bean的生命周期

    一.概述 Spring Bean的完整生命周期从创建Spring容器开始,直到最终Spring容器销毁Bean,生命周期时序图如下: 二.生命周期接口分类 Bean的生命周期经历了多个接口方法的调用, ...

  2. POJ 3020 -Antenna Placement-二分图匹配

    题意:一个N*M的矩阵里有K个观测点,你必须放置天线覆盖所有观测点.每个雷达只能天线两个观测点,这两点必须相邻.计算最少天线数. 做法:将所有相邻的观测点连起来,建图.跑一遍匈牙利算法就计算出了最大的 ...

  3. python深度学习库keras——安装

    TensorFlow安装keras需要在TensorFlow之上才能运行.所以这里安装TensorFlow.TensorFlow需要vs2015环境,需要wein64位环境,所以32位的小伙伴需要升级 ...

  4. 洛谷P1047校门外的树题解

    题目 此题是一个模拟题,但需要注意的一点就是它的树是从数轴的0开始,所以我们也要从0开始,这样才能实现代码. 代码: #include<iostream> using namespace ...

  5. 基于FPGA的16阶级联型iir带通滤波器实现

    警告 此文章将耗费你成吨的流量,请wifi下阅读,造成的流量浪费本人不承担任何责任.初版源代码获取(请勿用作他用,仅供学习):https://gitee.com/kingstacker/iir.git ...

  6. 【XSY2032】简单粗暴的题目 组合数

    题目描述 给你\(n,k,a_1\ldots a_n\),设 \[ ans_n=\sum_{i=1}^n{(\sum_{j=i}^ns(j))}^k\\ \] 求\(ans_1\ldots ans_n ...

  7. Codeforces Round #542 [Alex Lopashev Thanks-Round] (Div. 2) A - D2

    A. Be Positive 链接:http://codeforces.com/contest/1130/problem/A 题意: 给一段序列,这段序列每个数都除一个d(−1e3≤d≤1e3)除完后 ...

  8. Android stadio 生成项目 Cannot find System Java Compiler. Ensure that you have installed a JDK (not just a JRE)

    解决方法 File-->Project-->Structrue-->SDK Location-->JDK location Use embedded JDK 前面勾去掉,指定一 ...

  9. [POJ 1637] Sightseeing tour（网络流）

    题意 (混合图的欧拉回路判定) 给你一个既存在有向边, 又存在无向边的图. 问是否存在欧拉回路. \(N ≤ 200, M ≤ 1000\) 题解 难点在于无向边. 考虑每个点的度数限制. 我们先对无 ...

  10. 逆向并查集 HYSBZ1015星球大战starwar

    星球大战starwar HYSBZ - 1015   很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系 ...