我可以使用本地文件系统中的图像作为 HTML 的背景吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14519388/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I use an image from my local file system as background in HTML?
提问by Johan Fredrik Varen
I've got an HTML document hosted on a remote web server. I'm trying to have one of the elements on the web page use an image file from my local file system as its background image. No luck with Chrome, Safari or Firefox (haven't tried IE).
我在远程 Web 服务器上托管了一个 HTML 文档。我试图让网页上的元素之一使用本地文件系统中的图像文件作为其背景图像。Chrome、Safari 或 Firefox 不走运（没试过 IE）。
Here's an example of what I've tried so far.
这是我迄今为止尝试过的示例。
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body { width: 100%; height: 100%; }
</style>
</head>
<body style="background: url('file:///Users/username/Desktop/background.png')">
</body>
</html>
If I inspect the body element using my browser's web inspection tool, and select "Open image in new tab" the image is there. So the browser is fully capable of getting at the image file using the given URL.
如果我使用浏览器的 Web 检查工具检查 body 元素，并选择“在新选项卡中打开图像”，图像就在那里。所以浏览器完全有能力使用给定的 URL 获取图像文件。
Is what I'm trying to pull off at all possible, or is this a security feature of the browser trying to block external domains from accessing the user's local resources?
我试图实现的目标是完全可能的，还是浏览器的安全功能试图阻止外部域访问用户的本地资源？
回答by khess99
It seems you can provide just the local image name, assuming it is in the same folder...
假设它在同一个文件夹中，您似乎可以只提供本地图像名称...
It suffices like:
它就足够了：
background-image: url("img1.png")
回答by Cjo
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;
this should help
这应该有帮助
回答by pollaris
Jeff Bridgman is correct. All you need is
background: url('pic.jpg')
and this assumes that pic is in the same folder as your html.
杰夫·布里奇曼是对的。您只需要
background: url('pic.jpg')
并且假设 pic 与您的 html 位于同一文件夹中。
Also, Roberto's answer works fine. Tested in Firefox, and IE. Thanks to Raptor for adding formatting that displays full picture fit to screen, and without scrollbars... In a folder f, on the desktop is this html and a picture, pic.jpg, using your userid. Make those substitutions in the below:
此外，罗伯托的回答工作正常。在 Firefox 和 IE 中测试。感谢 Raptor 添加了显示适合屏幕的完整图片的格式，并且没有滚动条......在文件夹 f 中，桌面上是这个 html 和图片，pic.jpg，使用您的用户 ID。在下面进行这些替换：
<html>
<head>
<style>
body {
background: url('file:///C:/Users/userid/desktop/f/pic.jpg') no-repeat center center fixed;
background-size: cover; /* for IE9+, Safari 4.1+, Chrome 3.0+, Firefox 3.6+ */
-webkit-background-size: cover; /* for Safari 3.0 - 4.0 , Chrome 1.0 - 3.0 */
-moz-background-size: cover; /* optional for Firefox 3.6 */
-o-background-size: cover; /* for Opera 9.5 */
margin: 0; /* to remove the default white margin of body */
padding: 0; /* to remove the default white margin of body */
overflow: hidden;
}
</style>
</head>
<body>
hello
</body>
</html>
回答by Roberto
You forgot the C: after the file:///
This works for me
你忘记了 C: 在 file:/// 之后
这对我有用
<!DOCTYPE html>
<html>
<head>
<title>Experiment</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style>
html,body { width: 100%; height: 100%; }
</style>
</head>
<body style="background: url('file:///C:/Users/Roby/Pictures/battlefield-3.jpg')">
</body>
</html>
回答by Philippp
FireFox does not allow to open a local file. But if you want to use this for testing a different image (which is what I just needed to do), you can simply save the whole page locally, and then insert the url(file:///somewhere/file.png) - which works for me.
FireFox 不允许打开本地文件。但是如果你想用它来测试不同的图像（这正是我需要做的），你可以简单地将整个页面保存在本地，然后插入 url(file:///somewhere/file.png) -这对我有用。
