CSS: 背景图像无法正常工作

Question

我刚刚开始涉足 Web 开发领域，所以在 html 和 css 方面我是初学者。

我正在尝试为网页上的一段文字创建背景图片，但由于某种原因无法加载该图片。

图片URL
我 100% 确定我 URL 正确（文件存储在本地目录中），因为使用图像标签，

img 源='C:/..../myimage.png'

工作得很好。但是，在此目录中使用 CSS 中的背景图像不起作用。

我也在尝试不同的 IDE，看看我最喜欢哪个。我开始使用 notepad++ 和 chrome 浏览器。使用它，背景图像可以正常工作。如果我使用 Brackets，即使它使用 chrome 作为实时反馈工具，背景图像也不会显示。

有人可以帮我理解为什么这不起作用吗？

这是我写的html和css。感谢您提供的任何帮助。

HTML:

<p id='bgimgex'>Here is a paragraph of text which has a background image</p>

CSS

#bgimgex{

    font-size:1.7em;
    color:cyan;
    margin:auto;
    width:50vw;
    background-position:center;
    background-image:url('C:/Users/Adad Dayos/Desktop/phase 2/course work/HTML series/HTML5_course_1/mod 5/images/melly.png');
    background-size:100% 100%;
    background-repeat:no-repeat;
}

Answer 1

只需将图像复制到项目目录中，避免在子文件夹名称中使用 space（或 ...）。

如果问题仍未解决，请在 chrome 中检查您的控制台（按 F12）并查看错误是什么。

Answer 2

您需要为“\\”更改斜线“/”，因为您的 css 在一个单独的文件中并且正在从浏览器加载。

background-image:url('C:\Users\Adad Dayos\Desktop\phase 2\course work\HTML series\HTML5_course_1\mod 5\images\melly.png');

Answer 3

以下代码适用于所有浏览器。我在我的系统中测试过。如果浏览器无法加载背景图像，请检查控制台 (f12)。我没有看到任何问题。另外请使用 file:///C:/Users 作为背景图像

    <html>
        <style>
    #bgimgex{

        font-size:1.7em;
        color:cyan;
        margin:auto;
        width:50vw;
        background-position:center;
        background-image:url('file:///C:/Users/Public/Pictures/Sample Pictures/Lighthouse.jpg');
        background-size:100% 100%;
        background-repeat:no-repeat;
    }


    </style>

    <body>
    <p id='bgimgex'>Here is a paragraph of text which has a background image</p>
    </body>
    </html>

Answer 4

解决方案：
感谢 Parham Heidari 帮助我解决这个问题。我会赞成你的回答，但我是堆栈交换的新手，没有代表这样做。

所以我使用 "inspect element" 在 chrome 中检查了控制台并看到：

Console debug info

这让我意识到存在阻止浏览器检索我的文件的安全问题。显然，当您为本地文件而不是相对目录提供完整目录时，就会发生这种情况。所以为了解决这个问题，我将 url 更改为：

background-image:url('../images/melly.PNG');

另外，感谢 Andrei Gheorghiu 告诉我如何解决这个问题，尽管我很确定我只是解决了这个问题。

CSS: 背景图像无法正常工作

CSS: background-image not working properly

html

css

image

background-image