45

imgという画像で呼ばれるサブディレクトリを持つHTMLファイルがありますdebut_dark.png。私のCSSファイルには次のものがあります。

body { 
    background: url(/img/debut_dark.png) repeat 0 0;
}

HTMLファイルにはbodyタグがあり、CSSファイルが適切に含まれています。他のすべてが適切にフォーマットされているので、CSSファイルが適切に含まれていることは確かです。

背景画像が表示されていません。白い背景しか表示されていません。これを修正する方法、またはそれをデバッグする方法さえありますか？

4

20 に答える 20

27

CSSファイルのパスによると、HTMLページと同じディレクトリにあると思います。url次のように変更する必要があります。

body { background: url(img/debut_dark.png) repeat 0 0; }
于 2012-12-25T09:19:38.510 に答える
17

次のように使用する必要があります。

        体 {
            背景：url（ "img / debut_dark.png"）繰り返し0 0;
        }

        体 {
            背景：url（ "../ img / debut_dark.png"）繰り返し0 0;
        }

        体 {
            background-image：url（ "../ img / debut_dark.png"）repeat 0 0;
        }

または、FirefoxFirebugツールを使用してCSSルールを検査してみてください。

于 2012-12-25T09:21:16.570 に答える
9

display: block;これがOPの正確なケースに対応していないことは知っていますが、Googleから来る他の人にとっては、要素タイプに基づいて試すことを忘れないでください。に画像がありましたが、表示さ<i>れませんでした...

于 2016-05-11T17:57:15.467 に答える
6

あなたの体が高さを持っていることを確認してください、f.ex：

body { 
    background: url(/img/debut_dark.png) repeat;
    min-height: 100%;
}
于 2012-12-25T09:21:03.000 に答える
5

同じ問題があります。しかし、それは私にとっては適切に機能します

background: url(../img/debut_dark.png) repeat
于 2015-10-12T05:25:13.533 に答える
3

URLで相対パスを使用する必要があります。index.htmlが存在するルートディレクトリに2つのフォルダを作成したと思います。1つは「CSS」フォルダーで、もう1つは「img」フォルダーです。

ここで、cssファイルの「img」フォルダにアクセスする必要がある場合。したがって、「../」構文を使用してルートディレクトリに一度戻る必要があります。次に、「../img」構文を使用して「img」フォルダに移動します。次に、画像名「../img/debut_dark.png」を入力します。

body { 
    background: url("../img/debut_dark.png") repeat 0 0;
}
于 2018-08-22T11:08:16.027 に答える
2 
body { 
        background: url("../img/debut_dark.png") no-repeat center center fixed;
    }

私のために働いた。

于 2018-04-19T12:15:49.660 に答える
2

以外にこれらの追加のプロパティがあることは常に良いことです

background-image：url（'path'）no-repeat 0 0;

  1. 要素に寸法を設定します

    幅：x; 高さ：y;

  2. 背景サイズ：100％

    • このプロパティは、要素に対して定義した上記の寸法に画像を合わせるのに役立ちます。
于 2018-05-12T15:33:25.060 に答える
2

私も同じ問題を抱えていました。私にとってそれは一緒に働いた：

  background: url("../img/green.jpg") no-repeat center bottom/cover;
  height: 100vh;
于 2019-05-22T02:40:03.557 に答える
1

ローカルコンピューターで埋め込みCSSを使用しています。atom.jpgファイルをhtmlファイルと同じフォルダーに配置すると、次のコードが機能しました。

background-image:url(atom.jpg);
于 2014-01-20T20:57:03.343 に答える
1 
background : url (/img.. )

注：cssが別のフォルダーにある場合は、必ずスラッシュでイメージパスを開始してください。

それは私のために働いた。！

于 2020-09-13T14:07:17.820 に答える
0

この属性には、完全な場所が指定されているときに画像が表示されることがわかりました。その画像をサーバーにアップロードし、その画像の場所をbackground-image：url（ "xxxxx.xxx"）;にリンクしただけです。属性とそれは最終的に機能しましたが、サーバーがない場合は、その画像のプロパティに移動して、属性に画像の完全な場所を入力してみてください。HTMLファイルのタグでこの属性を使用していましたが、CSSファイルでも確実に機能します。その方法が機能しなかった場合は、behance、facebook、instagramなどのインターネットに画像をアップロードし、画像を調べてその場所を属性にコピーしてみてください。これが機能することを願っています

于 2018-01-19T07:53:54.760 に答える
0

同じ問題が発生していました。繰り返し00の部分を削除した後、問題は解決しました。

于 2018-04-04T13:44:58.727 に答える
0

パスが正しければ、ボディセクションに要素がないと思います。本体の高さを定義するだけで、コードが機能します。

于 2019-04-24T10:36:01.813 に答える
0

この質問では、画像呼び出しに外部CSSを使用する方法について説明します

のように：assets / images / laravelamit.jpg

次に、assets / css / style.cssに移動し、開いて配置する必要があります

背景：url（../ images / laravelamit.jpg）;

于 2021-04-02T06:23:53.207 に答える
0

ローカルで開発している場合VSCodeでSCSSからCSSLivesassコンパイラを処理しているかどうかを確認します

于 2021-07-07T05:46:44.940 に答える
0

<link>タグのhref内のhtmlファイル内のタグ内<link>は実際のパスの前にドット（。）を置きます

スタイルシートのパスが/css/style.cssの場合、参照は次のようになります

<link rel="stylesheet" href="./img/image.jpg">

次に、.cssファイル内

画像が保存されている実際のパスの前に二重ドット（..）を付けると、次のようになります。

body{background-image : url("../img/image.jpg");}

上記の方法は私のために働いた

于 2021-10-25T13:23:52.397 に答える
0

あなたは構文を使ってみることができ!importantます、それはうまくいくはずです：

background: url(/img/debut_dark.png) repeat 0 0 !important;

于 2021-11-27T22:15:37.730 に答える
-1

基本的に問題はファイルパスにあります。URLの先頭にあるスラッシュを使用すると、ルートでファイルが検索されます。それを削除すると、このcssファイルに相対的なパスになります-次のようになります： background-image: url(img/debut_dark.png);

Atomを使用している場合、画像のプロジェクトパスをコピーすると、コピーされたパスにスラッシュが含まれることがあるので注意してください。

于 2018-01-05T15:52:15.740 に答える
-1

vs codeを使用している場合は、background：url（'img / bimg.jpg'）の代わりにbackground：url（ "img / bimg.jpg"）を使用してみてください。

于 2021-01-13T11:08:15.967 に答える