在我的背景中创建一个正方形的 html 网格，不会干扰前景中的元素

Question

我想在我的网页背景中创建一个正方形网格，这个网格已经有很多不同的元素来承载内容。我现在的问题是，我正在创建的div方块与其他所有东西的布局相集成。我曾尝试将方形div的父div的z索引设置为-3，但这似乎并没有真正的帮助。有什么好的css规则可以帮助我解决这个问题？感谢

Answer 1

在Photoshop中创建瓷砖，然后将其保存为*.PNG或*.GIF。这些瓷砖的文件大小最小。

在您的容器或包装器中使用这个div:

.contentContainer {
    background:url(images/image_background.png) top left no-repeat;
}

1. background:url集是图像的url
2. 左上角设置位置。您可以使用"顶部"、"中心"、"底部"等或"左上"、"上下"来根据需要对齐
3. 没有重复，这样BG图像就不会像你在窗户壁纸上可能经历的那样一次又一次地"平铺"。它看起来俗气

Answer 2

如前所述，在这种情况下最好使用图像。无论如何，这里有一个jsfiddle，展示了如何在包装器上使用背景方块的绝对定位，将其从文档流中移除：http://jsfiddle.net/eL1w7kdz/

HTML:

<div id="container">
    <div id="background-squares">
        <div>Square 1</div><div>Square 2</div><div>Square 3</div><div>Square 4</div><div>Square 5</div><div>Square 6</div><div>Square 7</div><div>Square 8</div><div>Square 9</div><div>Square 10</div><div>Square 11</div><div>Square 12</div>
    </div>
    <div id="main-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin bibendum neque a venenatis dictum. Donec fringilla euismod sodales.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer leo ipsum, aliquam sit amet ligula non, fringilla commodo diam. Vivamus tortor mi, blandit vel mi at, feugiat rhoncus libero. Donec volutpat, tellus nec sagittis tempor, leo dui sollicitudin turpis, et fringilla nisl metus ac libero. In augue mauris, malesuada id ipsum vel, hendrerit vulputate justo.</p><p>Morbi aliquam est non fringilla cursus. Sed at felis et magna vehicula egestas. Integer finibus lectus lorem, a commodo nulla rutrum eu. Sed eleifend condimentum tristique. Curabitur eu nisl mi. Etiam imperdiet nisl metus, at iaculis ex consequat eget. In non eros dolor.</p>
    </div>
</div>

CSS：

#background-squares {
    position: absolute;
    z-index: -1;
}
#background-squares div {
    background-color: lightblue;
    width: 100px;
    height: 100px;
    margin-right: 10px;
    margin-bottom: 10px;
    float: left;
}
#main-content {
    padding: 10px;
}