html - 我如何让 img 元素在 CSS 中的背景图像下呈现

Question

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

这是我当前用于半透明 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渲染
• 使用 position 属性(这实际上是必不可少的)
• 使用 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 用户才能看到的更简单版本的页面。