wampローカルホストから提供されたモバイルブラウザに行の背景画像が表示されない

相対パスは、CSSファイルで使用される場合、動作が異なります。動作は同じであり、パスは同じです。まだ相対的ですが、人間には混乱しているように見えるかもしれません。

画像に次のようなパスを使用する場合：

<img src="/path/image.jpg"/> 

ブラウザはフォルダ。現在のWebのルートにあります。ただし、CSS内でまったく同じ値を使用する場合：

background-image: url( "/path/image.jpg" ); 

ストーリーは異なります。ブラウザは、現在のURLではなく、スタイルシートの場所に基づいて、pathフォルダ内を検索します。したがって、スタイルシートが次の場所にある場合：

www.example.com/wp-content/themes/twentyseven/ 

ブラウザは次を検索します：

www.example.com/wp-content/themes/twentyseven/path/image.jpg 

これは存在しません。したがって、スタイルシートのパスを基準にしてCSSパスを作成することが重要です。

詳細については、ここ。

コメント

• 明確にするために：if background-image url（ ip / site / wordpress / wp-content / uploads / 2017/06 / image.jpg ）そして私のスタイルシートはC：\ wamp64 \ www \ site \ wordpress \ wp-content \にありますthemes \ theme \ style.cssファイルパスを作成する必要がありますかC：\ wamp64 \ www \ site \ wordpress \ wp-content \ themes \ theme \ site \ wordpress \ wp-content \ uploads \ 2017 \ 06 \ image.jpg ？
• いいえ。まずブラウザにip/site/wordpress/wp-content/uploads/2017/06/image.jpgと入力し、開くかどうかを確認します。開いている場合は、URLを'' background-image url('URL')のようにするか、ipの前にhttp://を追加します。
• I pブラウザでそのパスを入力すると、開きます。開発ツールでは、IPの前にhttp：//がありますが、引用符で囲まれていません。引用符がないにもかかわらず、背景画像はローカルホストのWebサイトに表示されますが、モバイルには表示されません。ありがとう。

問題は、imgsrcまたはbackground-imageurlではなく、 Apacheとファイアウォールを使用します。理由はまだわかりませんが、http.vhosts.configファイルを変更してWampサーバーを更新し、Wampのファイアウォール設定をオフにすると、イメージが表示されます。ファイアウォールを変更してからApacheを変更するという逆の方法で行った場合、画像は「表示できませんでした。