0

我对如何使用 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 还很陌生，所以我可能会做一些完全错误的事情。谢谢！

4

4 回答 4

1

因为它是空的，所以你<div>有 0 height。

您应该在 CSS 中设置高度。

于 2012-04-04T02:36:38.463 回答
0

原因是你的css维度id="top_background"没有设置。默认情况下 div 包含它的宽度 100% 因为 div 是块级元素。

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

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

例如：您想重复您的背景图像600px，并且200px.请参见下面的 css

#top_background 
{ 
    background: url(images/header.png) repeat-x; 
    width:600px;
    height:200px
}
于 2012-04-04T03:01:04.077 回答
0

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

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

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

#top_background 
{ 
    background: url(images/header.png) repeat-x; 
    height:200px
}
于 2012-04-04T04:43:54.730 回答
0

尝试使用这个 background-repeat:repeat-x;

于 2019-03-14T18:34:37.407 回答