Question

尝试让我的图像在我的网页顶部的x轴上重复。图像出现但不重复。

HTML：

<div id='head'><img src='img/header.jpg'></div>

CSS：

 #head img {
    background-repeat: repeat-x;
    width: 100px;
    height: 20px;
    position: absolute;
 }

感谢。

Answer 1

这是因为您已使用<img>标记在网页上放置图片。但你想要做的是设置背景如下：

CSS：

#head {
    background-image:url('img/header.jpg');
    background-repeat: repeat-x;
    width: 100%;
    height: 20px;
    position: absolute;
}

HTML：

<div id='head'></div>

Answer 2

你的html在div中显示图像。

如果您想将图像作为背景，则需要在css文件中进行设置，如：

#head {
    background-image:url('img/header.jpg');
    background-repeat: repeat-x;
    width: 100%;
    height: 20px;
    position: absolute;
}

然后从你的HTML代码中删除img balise：

<div id='head'>&nbsp;</div>

代表不易碎的空间，以确保你的应答中有内容。

FOW

编辑：汤姆比我快

编辑：使css工作：）

Answer 3

这是Fiddle。

HTML：

 <div id='head'></div>

CSS：

#head {
    background-repeat: repeat-x;
    width: 100px;
    height: 200px;
    position: absolute;
    background-image:url("http://t2.gstatic.com/images?q=tbn:ANd9GcRueEELruucpzBbsfBcn_JPGG338iDtWWoJPYo3o9AvbKty37edzg");
}

我希望你能实现这个目标。

Answer 4

这是您的代码正在做的事情：

img标签将单个图像（header.jpg）插入代码中。你的css样式告诉代码在img标签提供的空间内沿着x轴重复任何css指定的背景图像。

所有这一切：直接将样式分配给头部ID并将header.jpg作为背景图像添加到样式中，它将正常工作。以下面的例子为例：

<!DOCTYPE html>
<html>
<head>
<style>
.kitty 
{
background-image: url('http://images5.fanpop.com/image/photos/26000000/Nyan-Cat-Gif-   nyan-cat-26044255-500-375.gif');
height:400px;
background-repeat: repeat-x;
background-color:#cccccc;
}
</style>
</head>

<body>
<h1 class="kitty">Hello World!</h1>
</body>

</html>

Answer 5

如果你想重复你的图像，使用css在div的背景中应用图像 HTML：

<div class="head">
&nbsp; &nbsp;
</div>

CSS：

<style>
.head{
 background:url("/images/pulpit.jpg") ;
 width: 100px;
 height: 100px;
 position:absolute;
 background-repeat:repeat-x;

 }
</style>

重复背景图像作为标题

5 个答案: