CSS：背景图像不能正常工作

问题描述：

我刚刚开始在Web开发世界，所以我是一个初学者，当涉及到HTML和CSS。CSS：背景图像不能正常工作

我想为我的网页上的一段文字创建一个背景图片，但由于某种原因图片不会加载。

图片URL
我100％肯定我有正确的URL（将文件存储在本地目录），因为使用图片代码，

IMG SRC =“C：/ ... ./myimage.png'

完美无缺。尽管在CSS中使用background-image并不适用。

我也尝试了不同的IDE来看看我最喜欢哪一个。我开始使用记事本++和Chrome浏览器。使用这个，背景图像工作正常。如果使用括号，即使使用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; 
}

您的CSS与HTML文件相关的地方在哪里？ – Ryan

您是否使用xampp或wamp等服务器，或者您是否从Windows打开html文件？ – MarioZ

我的html文件位置有2个子目录，图像和css。图像文件夹有图像，而css文件夹有我的css文件。这就是为什么我不得不在我的css属性中使用完整的图像目录，因为图像不在同一个目录中，或者在css的子目录中。 –

答

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

如果问题仍然没有解决，请检查您的控制台在铬（按F12），看看有什么错误。

感谢您的建议。我没有检查控制台，发现这个： “不允许加载本地资源” –

@Adam：所以路径是正确的，但是由于CORS你的浏览器不允许你加载资源。 –

答

到你的文件正确的文件路径的最简单方法是复制/粘贴路径给它在浏览器地址酒吧并击中输入。它会被自动正确编码，你可以将结果路径复制/粘贴到你的CSS中。

background-image:url('file:///C:/Users/Adad%20Dayos/Desktop/phase%202/course%20work/HTML%20series/HTML5_course_1/mod%205/images/melly.png');

从 file://前缀

除此之外，我也换成空间与%20。如果不明显，这只会在您的机器上运行。

您的问题似乎与CORS有关。

为了突破这一点，你可以用这个PARAM推出自己的Chrome实例：

chrome.exe --allow-file-access-from-files

或者你可以安装Allow-Control-Allow-Origin:* Chrome扩展程序。

既然你想在你的文件系统中使用，那么基于设置头部服务器端的解决方案显然不起作用。至于其他浏览器，你需要自己搜索它，但现在，你知道原因，找到一个解决方案应该是微不足道的。

听起来像一个好主意，但不幸的是没有工作。不管怎么说，还是要谢谢你。 –

@Adam，浏览器控制台中是否有404错误，说它无法找到该文件？ –

原来，这是一个安全问题的事情，因为我使用完整的本地URL。我现在已经解决了这个问题，但是感谢您向我展示如何更改权限。很有用。 –

答

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

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

答

下面的代码工作在所有的浏览器。我在我的系统中测试过。请检查控制台（f12），如果浏览器无法加载背景图像。我没有看到任何问题。同时，请使用file：/// C：/用户的背景图像

<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>

答

SOLUTION：
谢谢帕勒姆Heidari帮助我解决这个问题。我会upvote你的答案，但我是新的堆栈交换，并没有代表这样做。

所以我用“检查元素”检查中铬控制台看到：

Console debug info

这让我意识到有一个安全问题阻止浏览器取回我的文件。显然，当您为本地文件而不是相对目录提供完整目录时会发生这种情况。因此，要解决这个问题，我改变了我的网址：

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

另外，感谢安德烈·乔治乌告诉我如何解决这个问题，尽管我敢肯定，我只是在它的工作呢。

“我没有代表这样做”不适用于您自己的问题。既然你是提问者，你应该能够[（a）对你发现的问题的答案进行投票，并且（b）接受答案]（https://stackoverflow.com/help/privileges/create-帖子）。 – Krease

谢谢，还在学习如何使用这个网站。 –

CSS：背景图像不能正常工作

相关推荐