Question

基本上，我试图在图像上放置一个半透明的div作为幻灯片文本的背景。不幸的是，浏览器似乎总是在img上呈现background-image。有什么方法可以解决这个问题吗？

这是我目前用于半透明div的CSS：

#slideshow .info
{
    height: 80px;
    margin-top: -80px;
    background: url(../../images/slideshow-info-pixel.png) repeat;
}

... slideshow-info-pixel.png为单个像素，50％不透明度，PNG 24。

到目前为止，我已尝试z-index，CSS必须与IE6兼容。

Answer 1

如果我是正确的，你正在做的是你在html中插入图像然后你用css渲染透明div。

我的建议是：

让背景图像也由css
使用位置属性（它实际上是必不可少的）
使用z-index将一个div渲染到另一个

CSS：

.yourImage
{
    position: relative;
    background: url(./yourImage.png);
    width: 800px;
    height: 600px;
    z-index: 20;
}

. transparent
{
    position: relative;
    background: url(./transparent.png) repeat;
    width: 800px;
    height: 600px;
    z-index: 30;
}

.yourText
{
    position: relative;
    z-index: 40;
}

如果你真的想确保你的CSS与IE6兼容，你应该为它做另一个模板。说真的，确保你遵守IE6的每一个怪癖都是浪费时间。更快的方法是简单地做一个只有IE6用户才会看到的简单版本的页面。

Answer 2

你必须将图像放在带有背景图像的元素后面的另一个元素中。背景图像始终呈现最后方。

如何在CSS中的背景图像下获取img元素

2 个答案: