2

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

本质上，我想要一个平铺的背景在各处重复，但也有一个从页面顶部延伸到底部的白色矩形，占据大约 50% 的水平屏幕空间。我将如何实现这一目标？

4

4 回答 4

0

我希望这是你想要的。它是一个平铺的、重复的背景，带有一条白色条带，占屏幕空间的一半，从中间向下。如果您想要平铺背景，则无需在 CSS 中定义任何内容，CSS 会为您完成，但我不确定浏览器的兼容性，因此明确定义repeat:.

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

因此，在此 JSFiddle 中，白色条带必须具有 100%html的body高度container：height: 100%

JSFiddle

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

注意：这里我将条定义为，width: 50%;但有时最好明确定义宽度 ( width: 1200px;)，这样可以避免在放大、缩小等时文本和 div 出现问题。

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

于 2013-06-10T04:52:43.440 回答
0

如果我理解正确，您可能只想要页面的重复背景，然后绝对定位<div>为白色背景。

于 2013-06-10T01:46:32.647 回答
0

这是非常基本的东西，我建议你先学习 HTML 和 CSS 的初学者课程，然后再走得更远。

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

content {background-color: #fff; margin: 0px auto; width: 50%;}
于 2013-06-10T01:48:45.287 回答
0

解决方案 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/

于 2013-06-10T01:59:27.043 回答