带有 jquery 的 IE 8 中的 PNG 显示为灰色答案

【问题标题】：PNG in IE 8 with jquery displays as a grey colour带有 jquery 的 IE 8 中的 PNG 显示为灰色
【发布时间】：2012-07-08 02:40:19
【问题描述】：

我正在尝试为悬停时这个可怕的灰色 png 找到解决方案（这意味着透明的黄色，它似乎只在 IE 中显示为这样。我尝试的任何方法似乎都不起作用。任何帮助或提示都是真的方便。

这是 jquery。

    $('#header').hover(
function() {
$("#slideshow_bg").stop().animate({"opacity": "1"}, "fast");
},
function() {
$("#slideshow_bg").stop().animate({"opacity": "0"}, "fast");


});
});

这是html

<div id="header">



    <div id="ql_container" > 
        <span class="qltext">Our Systems</span>

            <div id="slidetabs">
                <a href="#">Therm Masonry</a>
                <a href="#">Concrete Block</a>
                <a href="#c">Precast Concrete</a>

            </div>

    </div>

    <!-- container for the slides -->
    <div class="images" style="float:left;">

        <!-- first slide -->
          <div class="slides" style="display:; position:absolute; background-image:url(03_building/02_concrete_block/02_IMAGES/02_HeroShot_1.jpg); width:779px; height:448px;" />
        <div id="slideshow_bg" style="opacity:;">

             <h2>lorem ipsum</H2>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam volutpat mauris in dolor egestas id iaculis tortor dignissim. Duis auctor dui vitae augue viverra pretium. Vestibulum ullamcorper iaculis tincidunt.</p>
             <p><a href="#"> Specifications</a> | <a href="#">Details</a></p>

      </div>
   </div>
</div>
</div>

这是css

#slideshow_bg{
opacity : 0;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
/* IE 5-7 */
filter: alpha(opacity=0);
zoom:1;
width:170px;
height:398px;
padding:25px 20px 25px 20px; 
position:absolute;
overflow:hidden;
background-image:url(../../images/slidesshow_desc_bg.png);
_background:none;
_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../images/slidesshow_desc_bg.png',sizingMethod='crop');
}

我知道这可能看起来很乱，但是，任何帮助将不胜感激:)

【问题讨论】：

标签： jquery internet-explorer png

【解决方案1】：

您的 div 与类幻灯片有问题。显示属性有问题。它必须是这样的：

<div class="slides" style="position:absolute; 
    background-image:url(03_building/02_concrete_block/02_IMAGES/02_HeroShot_1.jpg);     
    width:779px; height:448px;" />

或者你给你的显示属性一个值。

这个 div 也一样：

<div id="slideshow_bg" style="opacity:;">

希望这能解决您的问题。告诉我。

【讨论】：

感谢您的帮助，我最后选择了 rgba，但现在文本似乎位于其后面

【解决方案2】：

查看 z-index。你可以用这个把元素分层。

Click here for some info about z-index

【讨论】：