图像重复不起作用，为什么......？
首先我要说的是，我对 CSS 和 HTML 完全陌生，所以没有必要让我失望，好吧。
这是我的 HTML：
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="res/yOJCascadeStyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<img src="res/yOJheader.png">
</div>
</body>
</html>
这是我的 CSS：
root {
display: block;
}
#header{
background-image: url('yOJ_GIF_Tile.gif');
background-repeat: repeat-x;
}
现在，yOJ_GIF_Tile.gif 被放置在与 html 相同的文件夹中，如果我在 CSS 中将背景设置为特定颜色，则会显示该颜色。我已经查看了有关此问题的教程以及 StackOverflow 上之前的问题，看起来我的语法与其他人相同，但我无法让它工作......有人可以帮助我吗？我知道有一堆 HTML & CSS 大师在这个网站上漫游... =)
编辑： 我应该提到的是，它不仅重复不起作用，而且图像根本不显示。我想在 div 背景中水平重复它的 10 px X 200 px .gif 图像。
谢谢！！
I'll start out by saying that I'm totally new to CSS and HTML so no point in dumbing me down, ok.
Here is my HTML:
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="res/yOJCascadeStyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">
<img src="res/yOJheader.png">
</div>
</body>
</html>
And here is my CSS:
root {
display: block;
}
#header{
background-image: url('yOJ_GIF_Tile.gif');
background-repeat: repeat-x;
}
Now, the yOJ_GIF_Tile.gif is placed in the same folder as the html, and if I set the background to a specific color in the CSS that color is displayed. I've looked over tutorials on this and also previous questions here on StackOverflow and it looks as I have the same syntax as everyone else, but I don't get it to work... Can someone please help me out? I know there's a bunch of HTML & CSS gurus roaming this site... =)
EDIT: I should mention that its not only the repeat not working, the image isn't displayed at all. Its a 10 px X 200 px .gif image that I want to have repeated horizontally in the div background.
Thanks!!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
文件的搜索路径通常从 CSS 文件夹开始。
根据您的情况，尝试将图像放在同一个文件夹 css 中或使用相对路径更改 URL。
如果没有，可能是浏览器缓存有问题。如果不起作用，请尝试清除浏览器数据，将图像与 CSS 文件放在同一文件夹中。
The search path of the files usually begins in CSS file folder.
In your case, try putting the image in the same folder css or change the URL using relative paths.
If not, it may be a problem with the browser cache. Try clearing the browser data if does not work putting the image in the same folder as the CSS file.
问题可能比您预期的更简单，尽管您已经找到了自己的解决方案：
问题是您提供的
url('yOJ_GIF_Tile.gif')相对于 css 文件，而不是 html 文件。假设您的 css 文件与 html 文件位于同一目录中的文件夹中，您可以尝试：
相反（文件路径中的
..意味着，简单地说，“转到此文件的父目录”目录）。或者你可以简单地将图像移动到与 css 相同的目录，当然......
The problem might be more simple than you expect, though you're half-way towards your own solution:
The problem is that the path you supplied
url('yOJ_GIF_Tile.gif')is relative to the css file, not the html file.Assuming your css file is in a folder in the same directory as the html file, you could try:
instead (the
..in a file path means, simply, 'go up to the parent directory of this directory).Or you could simply move the image to the same directory as the css, of course...
尝试将 gif 放在与 css （而不是 html）相同的目录中
try by putting the gif in the same directory as the css (and not the html)
我认为 CSS 中对图像的引用是相对于 CSS 文件的。尝试将图像与 CSS 放在同一文件夹中，或将 CSS 规则更改为
url('../yOJ_GIF_Tile.gif');I think the reference to the image in your CSS is relative to the CSS file. Try putting the image in the same folder as the CSS, or change the CSS rule to
url('../yOJ_GIF_Tile.gif');