8
をspan個の要素に設定しましたが、表示されません。heightとwidthの設定が無視されていると思います。CSSパズル：空のスパンに背景画像を追加し、高さ/幅を設定するにはどうすればいいですか？
HTMLソース：
<div class="textwidget">
<a href="#" title="Start here"><span id="starthere" class="sidebar-poster"></span></a>
<a href="#" title="Primary documents"><span id="#primarydocs" class="sidebar-poster"></span></a>
<a href="#" title="Donate"><span id="donate" class="sidebar-poster"></span></a>
</div>
CSS：背景画像の
span.sidebar-poster {
margin-bottom: 10px;
background-repeat: no-repeat;
width: 160px;
}
span#starthere {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#starthere:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#primarydocs {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou180.jpg);
height: 285px;
}
span#primarydocs:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/brunelwantsyou_hover.jpg);
}
span#donate {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donatebutton.jpg);
height: 285px;
}
span#donate:hover {
background-image: url(/betatesting/wp-content/themes/dynamik/css/images/donateposter_hover.jpg);
}
どれも実際には表示されません。
Chromeデベロッパーツールでは、計算されたスタイルの下で、これらの2つのスパンに背景画像があるように見えます。このイメージのURLをコピーして貼り付けると、イメージが表示されます。しかし、実際にレンダリングするものは何もありません。
は[UPDATE - この部分は解決され、感謝] Chromeデベロッパーツールでは、一致したルールの下で、唯一の#starthereと#donateスパンは、実際にbackground-image属性を拾っています。 #primarydocsスパンではありません。何故なの？
スパン要素の高さは0px、幅は0pxです。どうして？ ＃idでサイドバーのポスタークラスの高さを私が持っていないのはなぜですか？ – AP257
'span id ="＃primarydocs "'はおそらく 'span id =" primarydocs "'であるべきです。 –
はい。ありがとう、私はそれを見つけられなかったか分からない！今すぐ把握する幅があります。 – AP257