css - background-color が div で機能しない

Question

div要素「High Tatras」「High Tatras 2」の背景色をCSSで黄色に設定しようとしています。

gallery li {background-color: yellow;}

jsfiddle デモhttp://jsfiddle.net/pragnesh/CjDDB/

ただし、背景色の黄色は要素の上部と下部にのみ適用されます。

このコードで何が問題になる可能性がありますか?

Answer 1

jquery-ui には奇妙な複数背景 css ルールがあるようです(複数背景ではありません... コメントだけで気が狂いました... 遅いです)。代わりに background 属性だけを使用してみてください:

.gallery li {
    background: yellow;
}

デモ: http://jsfiddle.net/j2TtX/

バックグラウンドを引き起こしているルールは次のとおりです。

.ui-widget-content { 
    border: 1px solid #aaaaaa/*{borderColorContent}*/;
    background: #ffffff/*{bgColorContent}*/ url(images/ui-bg_flat_75_ffffff_40x100.png)/*{bgImgUrlContent}*/ 50%/*{bgContentXPos}*/ 50%/*{bgContentYPos}*/ repeat-x/*{bgContentRepeat}*/;
    color: #222222/*{fcContent}*/;
}

Answer 2

jquery UI ライブラリには白色の背景画像があります。この行を CSS に追加して、CSS ルールを上書きします。

.gallery li.ui-widget-content{background-image:none;}​

Answer 3

問題であるこの背景を過大評価します。このクラス「.ui-widget-content」の背景プロパティを削除する必要があります

.ui-widget-content {
    background: url("images/ui-bg_flat_75_ffffff_40x100.png") repeat-x scroll 50% 50% #FFFFFF;
    border: 1px solid #AAAAAA;
    color: #222222;
}

jquery-ui.css から来ています (243 行目)

Answer 4

これが作業コードです

問題は、div に を設定すると、プロパティがすべての背景関連のプロパティをリセットする一方で、(画像よりも優先度が低い) 色プロパティのみを設定するため、background-image上書きできないことです。つまり、background-colorbackground

1. 背景色
2. 背景画像
3. 背景位置
4. バックグラウンドリピート
5. 背景添付ファイル

そして色を設定。だから使用：

 background: yellow;