Chrome、Firefoxで背景画像が表示されない

Dreamweaverを使用して背景画像をページに読み込もうとしています。これはIEとEdgeでは表示されますが、ChromeやMozillaでは表示されません。私は写真の場所（ファイルパス）を移動しようとしていて、まったく同じ結果でHTMLとCSSの両方を試しました。私はコードを書くか別の方法を見つけることができません（これは非常に新しいです）ので、すべてのブラウザに表示されます。これはCSSコードです：Chrome、Firefoxで背景画像が表示されない

background-image: url('file:///D:/website.com/httpdocs/pic/greenleaf.jpg')

本体の括弧内に設定されています。

とhtml：

<body background="file:///D:/website.com/httpdocs/pic/Demo Page Song Thumbnails/Jpeg Thumbnails/greenleaf.jpg">

どこでも私は、URL（... website.com/greanleaf.jpg）のように、省略記号と例を見つける見て、ドットが完全に私を混乱させる。おそらく私はファイルパスがどのように機能するかについて助けが必要だと思います。

出典

2017-02-27 riftvogel

プロジェクトにassets/imagesパスフォルダがありますか？ – Nicholas

これは、FirefoxとChromeブラウザでbodyタグとhtmlタグが実装されたためです。本文とHTMLタグはHTMLコンテンツと同じくらい大きいだけです。 EdgeとIEの場合、HTMLとBodyはビューポートのサイズに自動的にサイズ変更されます。

はまず

body, html{ 
    min-height:100%; 
    min-width:100%; 
}

出典

2017-02-27 22:40:50

-1

あなたのCSSにこれを追加、ブラウザが正しく画像を見つけていることを確認する必要があります。

Chromeのネットワークタブを確認するのによい方法です。 ChromeのF12キーを押してデベロッパーツールを表示します。 [ネットワーク]タブをクリックし、ブラウザを更新します。ロードされた/ロードされていないリソースのリストが表示されます。イメージが赤で表示されている場合は、読み込みに失敗しました。問題は不正なパスになります。

これは、相対ファイルパスを理解するための優れたリソースです。 https://css-tricks.com/quick-reminder-about-file-paths/

ただし、正常に読み込まれた場合、別の理由で画像が表示されません。すべてのコードを見ることなく、私は推測することしかできません。あなたのイメージが空であるコンテナはありますか？コンテンツや指定された高さがなければ、ブラウザによっては背景画像が表示されません。

出典

2017-02-27 22:42:44

イメージは、IEとEdgeで動作していることがわかり、パスの問題では動作しませんでした。 –

@MartinBarker、本当ですが、OPが絶対パスを使用しているので、FirefoxとChromeがこれらをブロックしている可能性があります。開発者ツールを調べることで、ローカルファイルがブロックされているかどうかを明らかにすることができます。 – Dexter

不正なパスではないため、セキュリティポリシー違反であると回答を更新してください。それが私のコメントで目指していたものです。 –

[OK]を、ので、あなたのコードが正しいか、それはIEとエッジに示されるイメージはなく、通常は、このコマンドを使用して、ブラウザを更新

しようとした場合：

ようコントロール+ Shiftキー+ Rあなたはそのウェブの最新かつ最高のバージョンを実行していることを確信しています

サイトの機能。

出典

2017-02-28 00:59:09 Nadim

Chrome、Firefoxで背景画像が表示されない

答えて

関連する問題