0

我正在做一个简单的网页设计任务并且遇到了一个问题。我试图让背景图像垂直重复，但有一个小问题：图像没有显示。它在同一个目录中，据我所知，代码是正确的（主要是针对 W3 学校进行交叉检查）。我欢迎任何想法。

    <html>
    <head>
    <style>
    body
    {
    background-image:url('VerticalTileJPEG.jpg');
    background-repeat:repeat-y;
    }
    </style>
    </head>

    <body>
    <p>Have some text!</p>
    </body>
    </html>
4

4 回答 4

1

这仅在图像文件与调用它的页面位于同一文件夹中时才有效。例如，如果它位于图像文件夹中，则路径必须类似于：

background-image:url('images/VerticalTileJPEG.jpg');

如果这没有帮助，请发布更多信息。还要确保使用文档类型。

编辑：如果您确定图像的路径是正确的，并且文件名是正确的（包括大写字母），那么也许可以尝试一个速记背景声明：

background:url(images/VerticalTileJPEG.jpg) repeat-x 0 0;

要检查您的路径是否正确，请转到您的网络检查器（例如 Chrome> [右键单击] 检查元素，然后单击右侧 (CSS) 列中的图像 url。如果浏览器找到图像与否。

于 2013-06-06T04:16:12.140 回答
0

（来自评论）

NOX您的图像的宽度/高度是多少？
你它应该是垂直重复的，所以教授让我们在1X1024处创建它。

所以你必须在 x 轴上重复图像：

body {
    background-image: url('VerticalTileJPEG.jpg');
    background-repeat: repeat-x;
}

一些笔记

  • 确保您的文件名完全正确VerticalTileJPEG.jpg（区分大小写）。
  • 确保您的 HTML 文件和图像位于同一文件夹中。
于 2013-06-06T04:49:57.520 回答
0

您告诉它向上和向下重复（沿 y 轴垂直），但您的身体只有 1 段高（我认为）不够高，无法多次显示图像。

要垂直重复它，您需要在页面下方提供更多内容，或者在 html 元素而不是正文上设置背景。

要水平重复，请重复-x。

于 2013-06-06T04:24:21.383 回答
0

在您的页面中使用 Doctype 并确保您想要在后台使用的图像位于您拥有 HTML 文件的同一文件夹中，或者如果它位于该目录中的另一个文件夹中，而不是尝试使用此代码。 background-image:url('/文件夹名/图片名.图片扩展名');

例如，如果图像名称是“xyz.jpg”并且它位于名为“images”的文件夹中，那么代码将为： background-image:url('/images/xyz.jpg');

于 2013-06-06T04:28:19.760 回答