Question

我首先要说的是，我对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＆amp; CSS大师漫游这个网站... =）

编辑：我应该提一下，不仅重复不工作，图像根本不显示。它是一个10 px X 200 px .gif图像，我希望在div背景中水平重复。

谢谢！

Answer 1

文件的搜索路径通常从CSS文件夹开始。

在您的情况下，请尝试将图片放在同一文件夹css中，或使用相对路径更改网址。
如果没有，则可能是浏览器缓存有问题。如果将图像放在与CSS文件相同的文件夹中，请尝试清除浏览器数据。

Answer 2

问题可能比您预期的更简单，尽管您已经完成了自己的解决方案：

yOJ_GIF_Tile.gif与html
位于同一文件夹中

问题是您提供的路径url('yOJ_GIF_Tile.gif')是相对于css文件而不是html文件。

假设您的css文件位于与html文件位于同一目录中的文件夹中，您可以尝试：

background-image: url('../yOJ_GIF_Tile.gif');

相反（文件路径中的..意味着，“转到此目录的父目录。”

或者你可以简单地将图像移动到与css相同的目录，当然......

Answer 3

尝试将gif放在与css相同的目录中（而不是html）

Answer 4

我认为CSS中对图像的引用与CSS文件有关。尝试将图像放在与CSS相同的文件夹中，或将CSS规则更改为url('../yOJ_GIF_Tile.gif');

图像重复不起作用，为什么......？

4 个答案: