无法显示背景图片HTML

时间:2011-08-23 14:32:19

标签: html css

我正在使用LAMP安装来创建一些个人网站。 我只是无法理解为什么我无法在我网站的正文部分放置背景图片。

如果我在尝试将图像作为背景时使用css或简单HTML,结果将是空白页,或者如果我设置背景颜色则为彩色。

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

    <p>hello</p> 

</body>

的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; 
}

关于我可能做错的任何想法?

为了可视化图像,可能需要激活某种模块吗?

任何帮助都将非常感谢!!

谢谢!

9 个答案:

答案 0 :(得分:14)

有关调试和其他信息的提示,应该会引导您找到正确的答案:

  • 检查您是否可以直接在网络浏览器中查看图像。如果您使用HTML文件的路径是“http://example.com/some/dir/index.html”,则直接浏览到“http://example.com/some/dir” /image.jpg“并查看图像是否出现。如果没有,那么您的图像将无法访问,或者位置错误,或者可能已损坏或使用错误的内容类型。

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

  • 考虑图像实际上可能正常工作的可能性,但也可以是单个像素,或完全透明,或者与背景相同的纯色,或者使用CSS定位属性定位在视线之外。

  • 尝试暂时使用另一张图片,最好是您在网络浏览器中可以看到的用于测试的图片,使用该浏览器下载(这将确保图像文件没有任何奇怪的问题)本身。)

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

  • 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>Test</title>
    </head>
    <body style="background-image: url(http://placehold.it/350x150);">
        This is a test.
    </body>

答案 1 :(得分:3)

很简单,您的路径不正确,您也可以更轻松地使用以下链接:

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

这将指向WEBROOT然后是图像文件夹。 使用像Firebug of Chromes Inspector这样的工具来查找图像无法加载的原因,它显然是图像的错误路径。

答案 2 :(得分:3)

重要的是要记住背景图像是从CSS文件设置的,因此图像的路径是相对于CSS文件的位置,而不是HTML文件。

答案 3 :(得分:2)

我遇到了同样的问题,这是由于我的文件结构

通常我们有:

index.html
图像(文件夹) -image1.jpg
css(文件夹) -style.css

因此,为了获得访问image1.jpg的路径,您需要向上一个文件夹。在style.css文件中,您将编写 ../Images/image1.jpg

而不是 ./Images/image1.jpg

这就是我的方法。 干杯

答案 4 :(得分:0)

如果图像位于同一目录中,则规则应为

background-image: url('image.jpg');

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

答案 5 :(得分:0)

如果图片在您的网站上,那么解决方法可能是在您的网站上写下图像的绝对路径 - 这在本地主机和您的网站上都有效。

答案 6 :(得分:0)

使用以下内容:

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

答案 7 :(得分:0)

我遇到了同样的问题,但却找不到明确的解决方案。在我的情况下,我需要在本地路径之前添加 file:/// 。这就是诀窍。所以在css中你会有类似的东西:

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

如果您正在使用atom,则可以将完整路径复制到img并粘贴到浏览器上。它将包含文件/// 这就是我弄明白的方式。

答案 8 :(得分: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