HTML 和 CSS3 - 两个背景 Div

Question

我的网站目前遇到了一些问题。我正在尝试让两个 div 彼此重叠，以在出现锯齿状时创建效果和背景。此处示例:https://docs.google.com/drawings/d/1IdqWKdkbS-xxLrvzLF8bh5k_B6iIzmlmNJdKi8CgZSc/edit?usp=sharing .唯一的问题是我无法让它工作。它一次只显示其中一张图像。这是我的代码:

<div style="background-image:url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture2.jpg'); background-repeat:repeat-x; clear:both;">
<p><!--EmptySpace--></p> </div>
<div style="background-image:url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture1.jpg'); background-repeat:repeat; clear:both">    
<!--content here-->
</div>

感谢您的宝贵时间。

Answer 1

您的代码完全符合预期。默认情况下，DIV 不会相互堆叠。它们是 display: block，并留在文档流中。这意味着第二个 div 将位于第一个 div 和第一段的下方。给它一张背景图片并不足以让它脱离流程。你需要改变定位。另外，请不要使用内联样式；每次你这样做，小猫就会死去。

我会这样做。

HTML:

<div class="top_bg"></div>
<!--content here-->

CSS:

.body {
    background-image: url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture1.jpg'); 
}

.top_bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 14px;
    background: #fff url('http://www.mediadude.co.uk/wp-content/themes/wpbootstrap/images/WashedWallTexture2.jpg') repeat-x;
}