logo标签列表

无法显示HTML背景图片

htmlcss
3

我正在使用LAMP安装程序创建一些个人网站。

我不明白为什么我无法在网站的body部分加入背景图片，无论是用CSS还是简单的HTML。

当我尝试将图片作为背景时，结果会是一个空白页面，或者如果我设置了背景颜色，则会是有颜色的页面。

<body background="./image.jpg"> 

    <p>hello</p> 

</body>

or

index.html:

<head> 

     <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> 

</head>

<body> 

    <p>hello</p> 

</body>

style.css:

body { 
    background-color: #FFFFCC;
    background-image: url(./image.jpg); 
    background-attachment: fixed; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #787878; 
}

有什么想法，我可能做错了什么？

也许需要激活某种模块才能显示图像？

非常感谢任何帮助！

谢谢！

2
你确定路径正确吗？难道不应该使用 ../ 而不是 ./ 吗？ - Kokos
你确定你的图片引用（./image.jpg）是正确的，并且该图片可以从网络访问吗？ - Joe Landsman
路径正确。点表示当前目录。 - Matteo
图片无法从网络访问，我正在本地工作。这不应该可以吗？ - Matteo
@Matteo 根据你的代码，你应该将它放在与 HTML 文件相同的目录下。你还必须确保你的 Web 服务器有权限读取该文件 -- 将其与 HTML 文件具有相同的文件权限应该是一个好的开始。（如何做取决于你使用的操作系统。） - Matt Gibson
显示剩余5条评论
9个回答
18

调试技巧和其他信息，这些信息有希望让你找到正确的答案：

  • 检查是否可以直接在Web浏览器中查看该图片。如果使用的路径为“http://example.com/some/dir/index.html”，则直接浏览“http://example.com/some/dir/image.jpg”，看看图片是否出现。如果没有出现，则您的图片无法访问，位置错误，可能损坏或使用了错误的Content-Type。

  • 如果图像位于正确位置但似乎无法访问，请首先检查文件权限。该文件应可由Web服务器读取。如有疑问，请将其所有权和权限与您正在成功读取的HTML文件相同。 （在Windows上，查看文件的属性/权限并允许所有人读取它。在Unix上，请尝试chmod 644<filename>。）

  • 考虑到该图像可能实际上运行良好，但也可能是单个像素，完全透明，纯色与其背景相同或使用CSS定位属性放置在视线之外。

  • 尝试临时使用另一张图片，最好是您可以在用于测试的Web浏览器中明确看到的图片，下载该浏览器（这将确保图片文件本身没有奇怪的问题）。

  • 请记住，如果您在CSS文件中定义背景，则图像的路径相对于该CSS文件而不是HTML文件。

  • “background”属性在HTML中已弃用。如果要在线指定背景，请尝试<body style="background-image: url(image.jpg);">...</body>。但是如今正确的位置应为CSS。

  • 您无需在图像位置前面添加“./”。如果它与您的HTML文件位于同一目录中，请使用图像名称，例如<body style="background-image: url(image.jpg);">

  • 它作为一个纯图片是否能正常工作？ <img src="background.jpg"/>

  • 通过使用类似于这个简单且有效的测试文档来检查您的HTML代码：

    •     <!DOCTYPE html>
    <html>
    <head>
        <title>测试</title>
    </head>
    <body style="background-image: url(http://placehold.it/350x150);">
        这是一个测试。
    </body>

    1. 它不会被可视化为普通图像。结果将是一个带有破碎页面的小正方形。
    2. 好的，我已经删除了它，但仍然无法工作...
    3. 只是为了调试尝试了一下，我正在使用CSS。
    4. 这两个文件在同一个目录中，因此相对路径是相同的，我是正确的吗？
    5. 尝试使用网络上真实图像的实际URL，但它会给我同样的问题。
    6. 我正在使用的图像保存在我的硬盘上，并没有加载到网络上，这是问题吗？
     - Matteo
    3

    很简单，你的路径不正确，也许更容易使用像这样的链接：

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

    它将引用WEBROOT然后是images文件夹。 使用像Firebug或Chromes Inspector这样的工具找出图片加载失败的原因，显然是你的图片路径有问题。

    2

    需要记住的是，background-image 是从 CSS 文件中设置的，因此图像的路径相对于 CSS 文件的位置，而不是 HTML 文件。

    2
    我曾经遇到过同样的问题，原因是我的文件结构有误。
    通常我们的文件结构如下：
    index.html
    Images (文件夹) - image1.jpg
    css(文件夹) - style.css
    所以，为了获取访问image1.jpg的路径，你需要向上一级文件夹。在style.css文件中，你需要写入：
    ../Images/image1.jpg
    而不是：
    ./Images/image1.jpg
    这就是我解决问题的方法。祝好运！
    0
    请使用以下内容：
    background-image: url('img/image.jpg');
    1
    这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。- 来自审核 - Sergei Bubenshchikov
    @Sergey，你为什么认为它没有回答问题？ - Lundin
    1
    @Lundin，这个答案没有提供任何描述：“为什么这段代码有效？”，“为什么我需要使用这个示例而不是其他答案来回答这个问题？”只需使用以下内容-这是评论用的描述。 - Sergei Bubenshchikov
    0
    如果图像在同一目录中，则规则应为：
    background-image: url('image.jpg');

    注意：您可能需要添加上面的引号。

    在寻求帮助之前，我尝试了各种语法组合，但它从未起作用。我认为问题可能出在某些可视化模块没有激活，这是可能的吗？ - Matteo
    1
    检查一下，如果你将图片作为一个元素添加到页面的主体中，例如 <img src="" />，它是否显示在页面上。 - Jason Gennaro
    我尝试了，但它无法可视化。但这次的结果是一个带有破碎页面的小窗口..这是什么意思？ - Matteo
    这意味着你的图片不在你认为它应该在的位置，或者你给它命名错误。1. 确保它与 CSS 样式表在同一个文件夹中。2. 确保它的名称/拼写相同。这包括大小写的使用。 - Jason Gennaro
    0
    如果图片在您的网站上，那么一个解决方法是编写指向您网站上图片的绝对路径 - 这在本地主机和您的网站上都有效。
    0

    我曾经遇到同样的问题，但从未找到明确的解决方案。在我的情况下，我需要在本地路径前添加file:///。这就是解决方法。所以在CSS中你会有类似这样的东西：

    background-image: url("file:///C:/Users.../resources/images/img-story-main.png");

    如果你使用Atom，你可以复制图片的完整路径并粘贴到浏览器中。它将包括文件///。这就是我发现的方法。

    你不应该这样做。当你部署你的网站时，本地路径是无效的。比如说你的css文件在“project/css/file.css”，而你的图片在“project/image/img.png”。那么在css中的路径应该是“../image/img.png”。 - Frank
    0

    这里有一个非常简单的方法来实现它 https://codepen.io/CITSimon/pen/QNZOmP

    HTML

    <HTML>

<HEAD>
</HEAD>

<BODY>
  <H1>My Heading On An Image</H1>
  <IMG SRC="https://image.shutterstock.com/image-photo/ripe-red-apple-green-leaf-600w-1669348621.jpg" alt="apple" />
</BODY>
<HTML>

    CSS

    h1{
  font-size : 50px;
}
img{
  position : absolute;
  left : 0px;
  top : 0px;
  z-index : -1;
  -webkit-filter : sepia(100%) opacity(0.5);
  filter : sepia(100%) opacity(0.5);;
}

    Heading on an image

    网页内容由stack overflow 提供, 点击上面的
    可以查看英文原文，
    原文链接