Question

我是一个完全的初学者。我尽力寻找解决方案，但部分问题是我甚至不知道我正在尝试做的事情的技术术语是什么。

基本上我想要一个平铺的背景重复到处，但是还有一个从页面顶部延伸到底部的白色矩形，占据了大约50％的水平屏幕空间。我将如何完成这项工作？

Answer 1

如果我弄错了，你可能只想重复一次页面背景，然后绝对定位<div>白色背景。

Answer 2

这是非常基本的东西，我建议你在进一步学习之前先学习HTML和CSS的初学者课程。

body {background: url(tile.png) left top repeat;}

content {background-color: #fff; margin: 0px auto; width: 50%;}

Answer 3

解决方案1 

这是一个仅使用应用于文档正文的background CSS属性的解决方案，不需要额外的元素。它已记录在案，因此您可以了解最新情况。

body
{
    /*
    * This specifies two background images, separated by comma
    * First parameter is just a white pixel
    * For the second use any background pattern of your choice
    */
    background-image:url("http://i.imgur.com/qdx0kzd.png"),  
    url("http://subtlepatterns.com/patterns/tasky_pattern.png");

    /*Center background images, self-explanatory*/
    background-position: center;
    /*Repeat white background image on Y-axis (vertical) only*/
    background-repeat: repeat-y, repeat;
    /*Make white background size 50%. Adjust as needed*/
    background-size: 50%, auto;
}

你可以在这个小提琴中看到一个例子：http://jsfiddle.net/dV2zZ/6/

解决方案2

此解决方案将不同的背景应用于不同的元素：文档正文的图案和内容容器的白色背景。为了更好地理解，还记录了代码。

HTML

<div id="content">Content</div>

CSS

html, body
{
    margin: 0;

    /* Make document size extend to the bottom of the page */
    height: 100%;
}

body
{
    /*Patern background. Use a pattern of your choice*/
    background-image: url("http://subtlepatterns.com/patterns/tasky_pattern.png");
}

#content
{
    /*Make container background white*/
    background-color: #FFFFFF;
    /*Center container*/
    margin: 0 auto;
    /*Size 50%, adjust as needed*/
    width: 50%;
    /*Extend to the bottom*/
    height: 100%;
}

请在此处查看示例：http://jsfiddle.net/jDRG3/1/

Answer 4

我希望这就是你想要的。这是一个平铺的重复背景，白色条带，屏幕空间的一半，从中间向下。如果你想要一个平铺的背景，你不需要在CSS中定义任何东西，CSS会为你做，但我不确定浏览器的兼容性，所以明确定义repeat:可能更安全。

首先，对于抱怨height: 100%不起作用的人，请注意height: 100%的div只是其父元素的height: 100% （包含div的容器，在这个JSFiddle的情况下，#container）。因此，如果其父级没有内容，则具有100％高度的div将变为不可见。

因此，html，body和container必须都有height: 100%白色条带才能在此JSFiddle中拥有100％的高度：

JSFiddle

在此之后，您可以自由添加任何内容到白色条带，这可能是您的网页！：d

注意：这里我将条带定义为width: 50%;，但有时可能更好地明确定义宽度（width: 1200px;），以便您可以避免问题当您放大，缩小等时，文本和div会变得混乱。

修改： 此外，由于容器的高度随着您添加更多内容（例如div）而增加，因此白色条带未到达页面底部的问题在于您根本没有任何内容可以填充它。随着您添加更多内容，条带将自然增长以填充页面。祝你好运！

如何在另一个背景之上将白色矩形一直向下延伸？

4 个答案: