0

目前我的网站遇到了一些问题。我试图让两个 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>

谢谢你的时间。

4

1 回答 1

0

您的代码完全按预期工作。默认情况下，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;
}
于 2013-05-02T16:52:00.060 回答