background-color不适用于div

Question

我正在尝试将div元素“ High Tatras”，“ High Tatras 2” ... elements的背景色设置为带有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-color覆盖它，因为它仅设置了color属性（其优先级低于image），而background属性将重置所有与背景相关的属性，即，

1. 背景颜色
2. 背景图
3. 背景位置
4. 背景重复
5. 背景附加

并设置颜色。 因此使用：

 background: yellow;