web-dev-qa-db-ja.com

ローカルファイルシステムの画像をHTMLの背景として使用できますか？

リモート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を使用して画像ファイルを取得できます。

私がやろうとしていることは可能ですか、これは外部ドメインがユーザーのローカルリソースにアクセスするのをブロックしようとしているブラウザのセキュリティ機能ですか？

htmlcssbackground-image
27
Johan Fredrik Varen

同じフォルダ内にあると仮定して、ローカルの画像名だけを提供できるようです...

次のようなもので十分です。

background-image: url("img1.png")
18
khess99
background: url(../images/backgroundImage.jpg) no-repeat center center fixed;

これは役立つはずです

16
Cjo

ジェフブリッジマンは正しい。あなたが必要なのは
背景：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>
7
pollaris

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