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和第一个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;
}

HTML和CSS3 - 两个背景分区

1 个答案: