画像にCSSを使用する

Question

divタグに画像を添付しようとしています。

<div class="arrow"></div> 

.left div.arrow{background-image: url(../images/design/arrow.jpg); float:left;} 

これを使用してHTMLページに何も表示されません。 私はそれを正しくやっていますか？ 正しいフォルダに画像があります。

おかげ

Answer 1

あなたは、それはコンテンツがありませんので、それ以外の場合はDIVは基本的には見えない、DIVのwidthとheightプロパティを設定する必要があります。背景画像の寸法に幅を設定してください（&）。

他の人が指摘しているとおりです。あなたのセレクタは、ターゲットdivがクラス "left"の要素の中にあることを示唆しています。そうでない場合、セレクタは機能しません。

Answer 2

.left div.arrow{background-image: url(../images/design/arrow.jpg); float:left;} 

これはdiv有するクラスarrowクラスleftを有する要素内に含まれるべきであることを示唆しています。これは本当ですか？

あなたはそれが空のときのdivを表示したい場合は、CSSでの幅と高さを指定する必要が

div.arrow{background-image: url(../images/design/arrow.jpg); float:left;} 

Answer 3

にそれを変更する場合があります。

Answer 4

divにはサイズがないため、表示されません。サイズを指定するか、divにコンテンツを追加します。

あなたがこれを行う場合は

div.arrow{background-image: url(../images/design/arrow.jpg); float:left; width:100px; height:100px;} 

Answer 5

：

.left div.arrow{background-image: url(../images/design/arrow.jpg) 

をそれはdiv要素がleftのクラスで内部の要素である場合にのみ動作します。

あなたはこれで直接それをターゲットにすることができます：あなたは正しいを指定

• あなたはあまりにも

• をCSSでwidthおよび/またはheightを指定しますことを確認してください

  div.arrow{background-image: url(../images/design/arrow.jpg) 
  

  画像のパス

  div.arrow{ background-image: url(../images/design/arrow.jpg); width:200px; height:200px; }