Question

我对如何使用html和css获取重复图像感到有些困惑。我在这里有这段代码：

<html>
<head>
    <title>Test</title>
    <link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>

    <div id="top_background"></div>

</body>
</html>

然后在style.css：

/* Reset CSS */

html, body, div, span, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, label { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

ol, ul { list-style: none; }

:focus { outline: 0; }

/* Content */

#top_background { background: url(images/header.png) repeat-x; }

但是当我加载文件时，它只是一个空白的网页。取出'repeat-x'不会改变任何东西。我对html和css相当新，所以我可能会做一些完全错误的事情。谢谢！

Answer 1

由于它为空，因此<div>有0 height。

你应该在CSS中设置一个高度。

Answer 2

原因是您的{c}维度id="top_background"未设置。 默认情况下div包含宽度100％，因为div是块级元素。

在您的情况下，您正在重复背景图像，因此我们必须设置div的高度以查看背景图像。

由您决定要设置多少宽度和高度。

例如：您想要重复背景图片，直到600px和200px.为此，请参阅下面的css

#top_background 
{ 
    background: url(images/header.png) repeat-x; 
    width:600px;
    height:200px
}

Answer 3

您尚未在 #top_background 中定义高度，这就是图片不重复的原因。

因此，无论何时在y轴或x轴上重复图像，都要检查宽度高度并根据您的要求进行设置。

现在您可以添加下面提到的css，并可以根据您的要求设置宽度。

#top_background 
{ 
    background: url(images/header.png) repeat-x; 
    height:200px
}

Answer 4

尝试使用此background-repeat：repeat-x;

重复图像HTML和CSS

4 个答案: