无法显示背景图片 HTML

Question

提问by Matteo

I'm using a LAMP installation to create some personal sites. I just can't understand why i won't be able to put a background image in the body section of my site.

我正在使用 LAMP 安装来创建一些个人站点。我只是不明白为什么我不能在我网站的正文部分放置背景图片。

Either if I use css or simple HTML when i try to put an image as background the result will be a blank page, or colored if I set a background color.

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

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

    <p>hello</p> 

</body>

or

或者

index.html:

索引.html：

<head> 

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

</head>

<body> 

    <p>hello</p> 

</body>

style.css:

样式.css：

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

Any ideas on what i could be doing wrong?

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

Maybe there's some kind of module to activate in order to visualize images?

也许有某种模块可以激活以可视化图像？

Any help will be very appreciated!!

任何帮助将不胜感激！

Thanks!

谢谢！

Answer 1

回答by Matt Gibson

Tips for debugging and other info, which should hopefully lead you to the correct answer:

调试提示和其他信息，希望能引导您找到正确答案：

Check to see if you can see the image directly in your web browser. If the path you're using to the HTML file is, for example, "http://example.com/some/dir/index.html", then browse directly to "http://example.com/some/dir/image.jpg" and see if the image appears. If it doesn't, then your image is inaccessible, or in the wrong place, or possibly corrupt or being served with the wrong Content-Type.
If the image is in the right place but seems inaccessible, check the file permissions first. The file should be readable by the web server. If in doubt, give it the same ownership and permissions as the HTML file you're successfully reading. (On Windows, view the properties/permissions of the file and allow everyone to read it. On Unix, try chmod 644 <filename>.)
Consider the possibility that the image might actually be working fine, but also be a single pixel, or completely transparent, or a plain colour the same as its background, or positioned out of sight with the CSS positioning attributes.
Try temporarily using another image, preferably one you can definitely see on the web in the web browser you're using for testing, downloaded with that browser (that will make sure there are no weird problems with the image file itself.)
Remember that if you're defining the background in a CSS file, the path to the image is relative to that CSS file, not to the HTML file.
The "background" attribute is deprecated in HTML. If you want to specify a background inline in the HTML, try <body style="background-image: url(image.jpg);" >...</body>. But the proper place for this would be in the CSS these days.
You don't need "./" in front of your image location. If it's in the same directory as your HTML file, just use the name of the image, e.g. <body style="background-image: url(image.jpg);">
Does it work as a plain image? <img src="background.jpg"/>
Sanity-check your HTML by using a very simple, valid test document, like this one:

检查是否可以直接在 Web 浏览器中看到图像。例如，如果您使用的 HTML 文件路径是“http://example.com/some/dir/index.html”，则直接浏览到“http://example.com/some/dir /image.jpg”并查看图像是否出现。如果没有，那么您的图像无法访问，或者位于错误的位置，或者可能已损坏或使用错误的内容类型提供服务。
如果图像在正确的位置但似乎无法访问，请先检查文件权限。该文件应该可以被 Web 服务器读取。如果有疑问，请赋予它与您成功读取的 HTML 文件相同的所有权和权限。（在 Windows 上，查看文件的属性/权限并允许每个人阅读它。在 Unix 上，尝试 chmod 644 <filename>。）
考虑图像可能实际上工作正常的可能性，但也可能是单个像素，或完全透明，或与背景相同的纯色，或使用 CSS 定位属性定位在视线之外。
暂时尝试使用另一张图像，最好是您在用于测试的 Web 浏览器中绝对可以在 Web 上看到的图像，并使用该浏览器下载（这将确保图像文件本身没有奇怪的问题。）
请记住，如果您在 CSS 文件中定义背景，则图像的路径与该 CSS 文件相关，而不是与 HTML 文件相关。
HTML 中不推荐使用“背景”属性。如果要在 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

回答by Jakub

Quite simply your path is not correct, also it might be easier for you to use a link like:

很简单，您的路径不正确，您也可能更容易使用以下链接：

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

which would refer to WEBROOT then images folder. Use tools like Firebug of Chromes Inspector to find why the image doesn't load, its clearly a bad path to your image.

这将指的是 WEBROOT 然后是图像文件夹。使用 Chromes Inspector 的 Firebug 等工具找出图像无法加载的原因，这显然是通往图像的错误路径。

Answer 3

回答by Denver

It is important to remember that the background-image is being set from the CSS file, therefore the path to the image is relative to the location of the CSS file, not the HTML file.

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

Answer 4

回答by Huani Neupane

I had the same problem, and it was because of my file structure

我有同样的问题，这是因为我的文件结构

Normally we have :

通常我们有：

index.html
Images (folder) - image1.jpg
css(folder) - style.css

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

So, in order to get the path to access image1.jpg, you need to go up one folder. In the style.css file you will write ../Images/image1.jpg

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

instead of ./Images/image1.jpg

代替 ./Images/image1.jpg

This was how I did it. Cheers

我就是这样做的。干杯

Answer 5

回答by Simon Long

Here's a very simple way to do it https://codepen.io/CITSimon/pen/QNZOmP

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

Answer 6

回答by Jason Gennaro

If the image is in the same directory, the rule should be

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

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

NB: you may need to add the quotes above.

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

Answer 7

回答by Jesper Christoffersen

If the images are on your website, then A workaround could be to write the absolute path to the images on your website - That works both on local host and on your website.

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

Answer 8

回答by CodeMe

use the following:

使用以下内容：

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

Answer 9

回答by Gustavo Correa

I was having the same problem and could never find a definitive solution. In my case I needed to add file:///before the local path. That did the trick. So in css you would have something like:

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

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

If you're using atom, you can copy the full path to the img and paste on your browser. It will include the file/// That's how i figured it out.

如果您使用 atom，则可以将完整路径复制到 img 并粘贴到浏览器上。它将包括文件/// 这就是我想出来的。

无法显示背景图片 HTML

提问by Matteo

回答by Matt Gibson

回答by Jakub

回答by Denver

回答by Huani Neupane

回答by Simon Long

HTML

HTML

CSS

CSS

回答by Jason Gennaro

回答by Jesper Christoffersen

回答by CodeMe

回答by Gustavo Correa

相关推荐

最近更新

标签

无法显示背景图片 HTML

提问by Matteo

回答by Matt Gibson

回答by Jakub

回答by Denver

回答by Huani Neupane

回答by Simon Long

HTML

HTML

CSS

CSS

回答by Jason Gennaro

回答by Jesper Christoffersen

回答by CodeMe

回答by Gustavo Correa

相关推荐

Html 用css删除ul上的空白

Html 元素“align”已过时或非标准：我应该使用什么来代替？

Html 如何在没有浮动的情况下水平对齐 2 个相邻的 div？

Html URL 中哪些字符是有效的？

相关推荐

最近更新

标签