CSS中图像顶部的PNG图像有问题吗?

时间:2009-04-03 09:36:02

标签: jquery css image html png

我正在使用jQuery内容旋转器,我想放置一个 PNG图像位于图像顶部并位于该文本之上。

这就是我的旋转器在HTML中的样子:

      <div id="testimonials">
    <div class="slides">

    <div class = "testimonialContainer">
    <div class ="leesmeer"> <a href ="http://site/link"><img src ="http://site/afbeeldingen/test.jpg" ><div class="caption">LORUM IPSUM DOLOR SIT AMET </div></a></div>
    </div>

    <div class = "testimonialContainer">
    <p class = "testimonial"> 2 </p>
    <div class ="leesmeer"> <a href ="http://site/link"><img src ="http://site/afbeeldingen/test.jpg" ></a></div>
    </div>

</div>
</div>

这是CSS:

.testimonialContainer {height: 123px}

    #testimonials{
    width: 210px;
    height: 125px;
    }

    .slides div{
    width: 210px;
    xheight:  25px;
    xpadding: 5px;

    .slides div.caption{
        background-image: url(../images/h_contentrotator_zwart.png);
        /*background-color:#000000;
        filter:alpha(opacity=60);
        -moz-opacity: 0.6;
        opacity: 0.6;*/
        color: #fff;
        width: 210px;
        height: 41px;
        position: relative;
        top: -24px;
        padding: 2px 20px 2px 10px;
        zbehavior: url("iepngfix.htc")
    }

问题是PNG图像没有出现,文字也没有出现。

有人能帮助我吗?

2 个答案:

答案 0 :(得分:1)

您需要在最后一个选择器上添加一个点(。):

.slides div.caption{ 

现在它不在那里,但应该是。

如果在添加点后问题仍未解决 然后更具体。改变

.slides div.caption

到此:

#testimonials a div.caption

从行为中删除Z.

即使没有解决,请给我一个jQuery脚本主页的链接。

答案 1 :(得分:0)

确保您拥有背景图片的正确路径。如果样式位于HTML页面的<head>中,则路径将相对于HTML页面。如果样式位于外部样式表中,则路径将相对于样式表的文件位置。

您可能希望首先在没有Internet Explorer 6 PNG修复的情况下使其工作,然后在您知道其余代码正确后再添加修复程序。