Question

我正在尝试使用此css规则在this demo上将透明图像叠加在另一个上面：

.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

使用CSS规则将透明图像定位在另一个上面的问题

1 个答案: