50

我有一个托管在远程 Web 服务器上的 HTML 文档。我试图让网页上的元素之一使用本地文件系统中的图像文件作为其背景图像。Chrome、Safari 或 Firefox 不走运（没试过 IE）。

这是我迄今为止尝试过的一个例子。

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

如果我使用浏览器的 Web 检查工具检查 body 元素，然后选择“在新选项卡中打开图像”，图像就在那里。所以浏览器完全有能力使用给定的 URL 获取图像文件。

是我想要实现的，还是浏览器的安全功能试图阻止外部域访问用户的本地资源？

4

5 回答 5

27 
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;

这应该有帮助

于 2015-10-25T03:06:55.287 回答
26

假设它在同一个文件夹中，您似乎可以只提供本地图像名称......

就足够了：

background-image: url("img1.png")
于 2014-01-29T19:01:43.483 回答
8

杰夫布里奇曼是正确的。您只需要
background: url('pic.jpg')
，这假设 pic 与您的 html 位于同一文件夹中。

此外，罗伯托的回答也很好。在 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>
于 2015-03-16T14:37:55.013 回答
2

你忘记了 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>
于 2013-01-25T10:26:04.910 回答
1

FireFox 不允许打开本地文件。但是如果你想用它来测试不同的图像（这是我需要做的），你可以简单地将整个页面保存在本地，然后插入 url(file:///somewhere/file.png) -这对我有用。

于 2019-12-04T23:33:15.977 回答