Question

我刚刚开始在网络开发世界中，所以当涉及到html和css时，我是初学者。

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

图片网址
我100％确定我的URL正确（文件存储在本地目录中），因为使用图像标记，

img src =＆＃39; C：/.... / myimage.png＆＃39;

完美无缺。使用CSS中的background-image与此目录不起作用。

我也在尝试使用不同的IDE来查看我最喜欢的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

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

如果问题仍然没有解决，请在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 for background-image

    <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

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

所以我使用“inspect element”检查了chrome中的控制台并看到了：

Console debug info

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

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

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

CSS：背景图片无法正常工作

4 个答案: