50

リモートWebサーバーでホストされているHTMLドキュメントがあります。Webページの要素の1つに、ローカルファイルシステムの画像ファイルを背景画像として使用させようとしています。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 に答える
8

ジェフ・ブリッジマンは正しいです。必要なのは
background: url('pic.jpg') だけです。
これは、pic が html と同じフォルダーにあることを前提としています。

また、ロベルトの答えはうまくいきます。Firefox と IE でテスト済み。画面に合わせて全体像を表示し、スクロールバーなしで表示するフォーマットを追加してくれた Raptor に感謝します... デスクトップ上のフォルダー f には、ユーザー ID を使用したこの html と画像 pic.jpg があります。以下でこれらの置換を行います。

<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

file:/// の後の C: を忘れ
ました

<!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 に答える