zoukankan      html  css  js  c++  java
  • 解决png图片在IE6下的透明问题

          已经几天没更新博客了,也就是这几天学习上的进账收效甚微,原因是在准备毕业答辩的事,还有两天时间用在了跑去东莞面试,面试的结果很悲催呵呵。自己其实自我感觉还过得去吧,至少能工作,但就是自己还不够自信,在别人面前总会表现出一副初学者的样子,这是很不好的。

          感慨的事就不说了,进入正题。

          昨天在某Q群,有人大呼:谁给他解决他的PNG图片在IE6下的透明问题,他就给谁充话费。我手快了点,直接打上,我来!

    但我只知道这类问题谷歌上很多解决方案,属于非常常见的问题,以前我做的时候,这类透明我都是用gif,而直接避开png,所以到现在我并没有去了解过这个问题。但昨天不得不寻找资料了。

          最终,我找到的解决方案如下:

    _background:none; 
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/nav_hover.png',sizingMethod='crop');
    

          没错,根据找到的方案,我写出来的路径正是如下面的'img/nav_hover.png',运行一切非常正常。但是,到了他那里,他修改了图片路径,怎么也显示不出来,但我看他修改的路径也没错啊,但就是显示不出来,非常奇怪。

          我尝试着在一个高手群上问,印象中,某高手一语中的的说明了我这个问题,但我当时没注意,他们就又接着讨论说用png透明不好怎么怎么的,我只能回谷歌寻找了。找啊找啊,终于在众多的信息中找到一句:“这图片路径是相对于html页的,而不是常规的相对文件所在位置”,啊,整个世界都明了。

          在我这本地测试,我的css是跟html同在一个根目录下,图片在img目录下,所以我上面的img/nav_hover.png是碰巧中撞对的。而在对方的服务器里,他的目录结构是style,images,也就是说,他在CSS文件中按正常引用的路径是:../images/nav_hover.png。这样就错了,相对于html,他的路径正确应该是image/nav_hover.png。

          最终,问题解决了,话费没跟他要,因为我也因此学习到了。

    /*******************************华丽的分隔线************************************/

    /********2011-6-16追加*******/

    最近工作时学到一招更好的,用JS,下面的部分引用别人的解释,木有时间写博,纯属存档。

    IE6下PNG背景透明或者图片透明一直让人很伤脑筋,以前的解决办法也不尽完好。

    最近在项目中,发现了一种几乎完美的解决办法。用JS在IE6下面实现png图和背景PNG透明。

    不敢独享,写下这篇文章,也好为自己以后查阅,利人利己啊。

    并且,可以解决a:hover 背景png的问题。下面开始,三步即可搞定IE6下PNG透明问题。

    第一步:下载JS文件DD_belatedPNG_0.0.8a.js

    下载地址:dillerdesign.com/experiment/DD_belatedPNG/DD_belatedPNG_0.0.8a.js

    第二步:引用JS文件

    <!--[if IE 6]>


    <script src="DD_belatedPNG_0.0.8a.js" mce_src="DD_belatedPNG_0.0.8a.js"></script>
    <script type="text/javascript">
       /* EXAMPLE */
       DD_belatedPNG.fix('.enter,.enter a,.enter a:hover');

       /* string argument can be any CSS selector */
       /* .png_bg example is unnecessary */
       /* change it to what suits you! */
    </script>


    <![endif]-->

    PS:灰色文字部分【'.enter,.enter a,.enter a:hover'】,为div选择器的名称,大家看后面的html代码即可明白

    第三步: 网页body部分

    <style type="text/css">

    .enter { 193px; height:43px; position:absolute; bottom:15px; left:60%; z-index:100; color:#FFF}

    .enter a{ 193px; height:43px; display:block; background:url(enter.png) no-repeat;}

    .enter a:hover{193px; height:43px; display:block; background:url(enter.png) 0px -43px;}

    </style>

    <div class="enter"><a href="index.php"></a></div>

    好了,大家预览一下效果吧。

    至此,IE6下png图片透明和IE6下面png背景图片就完美显示了。

    偷懒的处理办法

    直接用*号    够YD(淫''荡)吧  嘿嘿
     

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

  • 相关阅读:
    高性能网站建设之 MS Sql Server数据库分区
    Sql Server 分区演练
    数据库的优化措施 索引优化
    TabHost两种不同的实现方式
    Call requires API level 7 (current min is 1):(问题解决)
    Android特效 五种Toast详解
    SQLite使用
    android下db-journal文件作用
    关于android通过shell修改文件权限的学习
    关于android写入SD卡数据的学习代码
  • 原文地址:https://www.cnblogs.com/littledu/p/2051648.html
Copyright © 2011-2022 走看看