CSS：背景画像が正しく動作しない

-1

私はWeb開発の世界で始めているので、初心者です.HTMLとCSSについては初心者です。CSS：背景画像が正しく動作しない

私のウェブページにテキストの段落の背景画像を作成しようとしていますが、何らかの理由で画像が読み込まれません。

画像のURL
私は私が正しいURL（ファイルがローカルディレクトリに保存されている）を持っている100％確信しているため、画像タグを使用して、

のIMG SRC = 'C：/ ... ./myimage.png '

は問題なく機能します。このディレクトリでCSSの背景画像を使用することはできません。

私はまた、私が一番好きなものを見るために別のIDEを試しています。私はnotepad ++とchrome browserを使い始めました。これを使用すると、背景画像が正常に動作します。ブラケットを使用すると、クロムをライブフィードバックツールとして使用しても、背景イメージは表示されません。

誰かが私になぜこれが機能しないのか理解してもらえますか？

ここに私が書いたhtmlとcssがあります。何か助けてくれてありがとう。

HTML：

<p id='bgimgex'>Here is a paragraph of text which has a background image</p>

CSS

#bgimgex{ 

    font-size:1.7em; 
    color:cyan; 
    margin:auto; 
    width:50vw; 
    background-position:center; 
    background-image:url('C:/Users/Adad Dayos/Desktop/phase 2/course work/HTML series/HTML5_course_1/mod 5/images/melly.png'); 
    background-size:100% 100%; 
    background-repeat:no-repeat; 
}

出典

2017-06-20 Adam Day

あなたのHTMLファイルとの関係であなたのCSSはどこですか？ – Ryan

xamppやwampのようなサーバーを使用しているのですか、またはWindowsからhtmlファイルを開いていますか？ – MarioZ

私のhtmlファイルの場所には2つのサブディレクトリ、imagesおよびcssがあります。 imagesフォルダには画像があり、cssフォルダには私のcssファイルがあります。このため、イメージが同じディレクトリにないか、cssのサブディレクトリにないため、CSSのプロパティでフルイメージディレクトリを使用する必要がありました。 –

あなたのプロジェクトディレクトリにイメージをコピーして、サブフォルダ名にスペース（または...）を使用しないでください。

まだ問題が解決しない場合は、コンソールをChromeでチェックして（F12キーを押してください）、エラーが表示されているかどうかを確認してください。

出典

2017-06-20 18:12:22

提案していただきありがとうございます。私はコンソールをチェックし、これを見つけました： "ローカルリソースを読み込むことができません" –

@Adam：パスは正しいですが、あなたのブラウザはCORSのためにリソースを読み込めません。 –

あなたのファイルに正しいファイルパスを取得する最も簡単な方法は、ブラウザのアドレスに、それに貼り付ける/パスをコピーすることですバーを押してEnterキーを押します。自動的に正しくエンコードされ、CSSで結果のパスをコピー/ペーストすることができます。別にfile://プレフィックスから

background-image:url('file:///C:/Users/Adad%20Dayos/Desktop/phase%202/course%20work/HTML%20series/HTML5_course_1/mod%205/images/melly.png');

、私はまた%20でスペースを置き換えます。それが明白でない場合、これはあなたのマシンでのみ動作します。

あなたの問題はCORSに関連しているようです。この乗り越えるために

、あなたはこのPARAMでChromeのインスタンスを起動することができます：

chrome.exe --allow-file-access-from-files

それとも、ChromeのAllow-Control-Allow-Origin:*拡張機能をインストールできます。

これをファイルシステムに入れたいので、ヘッダーサーバー側を設定したソリューションは明らかに動作しません。他のブラウザに関しては、あなた自身でそれを検索する必要がありますが、今、原因を知っているので、解決策を見つけることは簡単です。

出典

2017-06-20 18:07:40

はいいアイデアのようですが、残念ながらうまくいきませんでした。とにかくありがとう。 –

@Adam、ブラウザのコンソールにファイルが見つからないという404エラーがありますか？ –

私は完全なローカルURLを使用していたため、セキュリティ上の問題でした。私は今問題を修正しましたが、許可を変更する方法を私に教えてくれてありがとう。非常に便利。 –

あなたのcssが別のファイルにあり、ブラウザからロードされているため、スラッシュ「/」を「\\」に変更する必要があります。

background-image:url('C:\\Users\\Adad Dayos\\Desktop\\phase 2\\course work\\HTML series\\HTML5_course_1\\mod 5\\images\\melly.png');

出典

2017-06-20 18:21:13 MarioZ

以下のコードは、すべてのブラウザで機能しています。私は自分のシステムでテストしました。ブラウザが背景画像を読み込めない場合は、コンソール（f12）で確認してください。私は何の問題も見ません。 /// C：/背景画像のためのユーザー

<html> 
     <style> 
    #bgimgex{ 

     font-size:1.7em; 
     color:cyan; 
     margin:auto; 
     width:50vw; 
     background-position:center; 
     background-image:url('file:///C:/Users/Public/Pictures/Sample Pictures/Lighthouse.jpg'); 
     background-size:100% 100%; 
     background-repeat:no-repeat; 
    } 


    </style> 

    <body> 
    <p id='bgimgex'>Here is a paragraph of text which has a background image</p> 
    </body> 
    </html>

出典

2017-06-20 18:25:46 James

-2

がSOLUTION：また、ファイルを使用してください
を私はこの問題を解決を支援するためにパラムHeidariに感謝します。私はあなたの答えをupvoteだろうが、私は交換を積み重ねるために新しいとそうするために担当を持っていない。

だから私は鋸「要素を検証」を使用してクロムにコンソールをチェックする：

Console debug info

これは私が私のファイルを検索し、ブラウザを防ぐセキュリティ上の問題があった実感しました。どうやらこれは相対ディレクトリではなく、ローカルファイルの完全なディレクトリを提供するときに起こります。私はとにかくそれを中心に働いていたかなり確信しているにもかかわらず、問題を解決する方法を私に言っために、また

background-image:url('../images/melly.PNG');

感謝アンドレイ・ゲオルギューを：だから、問題を解決するために、私はに私のURLを変更しました。

出典

2017-06-20 18:30:55

"私はそうする担当者がいません"あなた自身の質問には適用されません。あなたが質問の質問者であるので、あなたはあなたが役に立つと分かったあなたの質問に対する回答に投票し、（b）回答を受け入れることができるはずです（https://stackoverflow.com/help/privileges/create-投稿）。 – Krease

ありがとう、まだこのサイトの使い方を学んでいます。 –

CSS：背景画像が正しく動作しない

答えて

関連する問題