私はhtmlコードの下にこれを書い外部スタイルシート

-1

で動作していないリストスタイルイメージ：seccessfully作成私はhtmlコードの下にこれを書い外部スタイルシート

<!DOCTYPE html> 
<html> 
<head> 
<style> 
ul{ 
list-style-image:url('img/grey.png'); 
} 
</style> 

<body> 

<ul> 
    <li>Coffee</li> 
    <li>Tea</li> 
    <li>Coca Cola</li> 
</ul> 

</body> 
</html>

リストには、私は外部スタイルシートを使用してほしいと私は問題を抱えているコードを変更しました。

コード：

<!DOCTYPE html> 
<html> 
<head> 
<link rel="stylesheet" href="css/styletest.css?version=2" ></head> 

<body> 

<ul> 
    <li>Coffee</li> 
    <li>Tea</li> 
    <li>Coca Cola</li> 
</ul> 

</body> 
</html>

スタイルシート：

ul{ 
list-style-image:url('img/grey.png'); 
}

画像が第二のスタイルで表示されません。

ありがとうございました。

出典

2016-09-28 Tofiq

あなたのimgパスが間違っている – dippas

スタイルシートの画像へのパスを更新する必要があります。スタイルシートのパスは、スタイルシートを基準にしています。

あなたはそれがで定義されているディレクトリで開始し、相対パスを使用している。

あなたの最初の、作業、例では、次のプロジェクト構造を示唆しています。

img/ 
└── grey.png 
index.html

img/grey.pngがindex.htmlで定義されているので、相対パスはindex.htmlがであることをimgという名前のディレクトリを探して起動します。index.htmlとimgディレクトリの両方が同じディレクトリにあるので、それはそれを見つけました。その後、ファイルへのパスを続けます。

第2の正常でない例は、次のプロジェクト構造を示唆しています。

css/ 
├── styletest.css 
└── img/ 
     └── grey.png 
index.html

img/grey.pngので、相対パスがcssディレクトリにあるstyletest.cssがであることをimgという名前のディレクトリ、探し始めstyletest.cssで定義されています。 cssディレクトリにないため、imgが見つかりません。これは、以下のように、cssディレクトリから上のレベルです。

css/ 
└── styletest.css 
img/ 
└── grey.png 
index.html

現在のディレクトリからディレクトリレベルを上に移動するには、../を使用する必要があります。これで、システムはcssディレクトリの上に移動し、というディレクトリから、ディレクトリに、指定されたパスに沿ってファイルの検索を続けます。dippas同様

list-style-image: url('../img/grey.png');

出典

2016-09-28 13:15:29 hungerstar

外部のスタイルシートに変更したときに、画像のURLが "img/grey.png"ではなく "../img/grey.png"になるように "作業ディレクトリ"も変更されました。 ".."を追加すると、1つのディレクトリを上に移動します。

"/img/grey.png"を使用すると、ルート相対参照にすることもできます。

ただし、問題の原因は追加された「css /」パスです。 cssファイルをhtmlファイルと同じディレクトリに配置していれば、問題はありませんでした。

出典

2016-09-28 13:14:37 sankorati

へ

list-style-image: url('img/grey.png');

から

の変更は、すでにイメージのパスが間違っている、と述べました。理由は、ルールが定義されているcssファイルの場所で相対パスが開始されるためです。あなたの最初の例では、インラインCSSを使用しているので、パスはドキュメントルートに相対的です。 2番目の例では、/ cssのサブフォルダにある外部のcssファイルを使用しているので、これはパスになり、相対パス'img/grey.png'はこれ以上動作しません。 ../img/grey.pngは機能しません。

出典

2016-09-28 13:15:50

私はhtmlコードの下にこれを書い外部スタイルシート

答えて

関連する問題