css - 关于使用 CSS 规则将透明图像定位在另一个图像之上的问题

Question

我正在尝试在 this demo 处将一个透明图像叠加在另一个图像之上使用此 CSS 规则:

.item {
    position:relative;
}
.inner {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
}
.outer {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: url(http://chocolate.dream-demo.com/wp/wp-content/themes/dt-chocolate/images/home-bg.png) repeat;
}

和 HTML

<div class="item">
    <div class="inner">
        <img src="http://www.timeshighereducation.co.uk/Pictures/web/y/c/g/win_lose_dic_450.jpg" />
    </div>
     <div class="outer"> </div>
</div>

但是没有效果!我需要使用 css 方式来重复背景，因为它的大小与其他背景不同。它正在处理 position:fixed 格式，但它也涵盖了所有正文内容!

谢谢，

Answer 1

通过绝对定位 inner 和 outer div，它们的容器没有高度。

您需要这样做，以便 inner 将 item 的高度推到正确的大小。

为此，将您的 css 更改为如下所示:

.item {
    position:relative;
}
.inner {
    position:relative;
}
.outer {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: url(http://chocolate.dream-demo.com/wp/wp-content/themes/dt-chocolate/images/home-bg.png) repeat;
}

JSFIDDLE DEMO