HTML

Question

我正在使用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; 
}

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

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

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

谢谢！

Answer 1

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

检查您是否可以直接在网络浏览器中查看图像。如果您使用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>

Answer 2

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

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

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

Answer 3

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

Answer 4

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

通常我们有：

index.html
图像（文件夹） -image1.jpg
css（文件夹） -style.css

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

而不是 ./Images/image1.jpg

这就是我的方法。干杯

Answer 5

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

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

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

Answer 6

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

Answer 7

使用以下内容：

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

Answer 8

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

background-image：url（“file：/// C：/Users.../resources/images/img-story-main.png”）;

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

Answer 9

这是一种非常简单的方法 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);;
}

无法显示背景图片HTML

9 个答案:

HTML

CSS