显示 div 背景图像，但不显示背景颜色

Question

我遇到了一个小 CSS 问题。

我有一系列分层的 div，并且我设置了 div 类样式，它们都会显示出来（填充、字体颜色等）。但是，背景色不适用于覆盖的 div。

作为测试，我尝试设置边框和边框样式，它们都工作得很好，除了边框颜色，它没有显示出来，额外样式的边框仍然是黑色。

每个 div 都有一个唯一的 id，背景颜色不起作用的那些会嵌套（并排）在容器 div 中。我一直在尝试了解嵌套 div 是否采用父 div 背景颜色，但我尝试更改父级的溢出，但没有任何影响。

作为一种解决方法，我创建了一个正确背景颜色的 1 x 1px jpg 并设置了 divs 背景图像，这很有效。但这是一个 hack，我最好知道为什么所有样式元素都有效，除了背景颜色。

我希望我已经充分解释了我的情况，如果有人可以帮助我，我将不胜感激。

（另外，我使用dreamweaver编写代码，背景颜色在预览模式下显示，但在firefox、chrome或IE中不显示）

请求的代码：

      <div id="longBox">
        <div id="specialLable"> Rent Specials &amp; promotions</div><!--end specialLable-->
        <div id="promoMain"> 
        <div id="proHeader">Alhambra Village Fall Special:</div><!--end proHeader-->
        <div id="proDate">Expires: Date</div><!--end proDate-->
        <div id="clear"></div>
        <div id="protext">This is where the details go</div><!--end protext-->
        <div id="promoConditions"><br />Limited availability. All promotions subject to change. Not good with other offers or promotions unless specified.</div><!--end promoConditions-->
        <div id="proContact">Request an Appointment</div><!--end proContact-->
        </div><!--end specialLable-->
      </div><!--end longBox-->

#longBox{
width:713px;
height:225px;
background-color:#FFFFFF;
float:left;
margin:1.2em 0 0 .7em;
}

#specialLable{
background-image:url(../images/01titleBar.png);
margin: .5em .5em .5em .5em;
width:689px;
height:30px;
font-size:1.2em;
font-weight:bold;
text-transform:uppercase;
color:#667b90;
padding:3px 0 0 6px;
}


#promoMain{
margin: 0 .5em .5em .6em;
background-color:#ced5da;
height:166px
}

#proHeader{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
color:#CC6666;
float:left;
padding:.3em .6em .3em .6em;
margin:.6em 0 0 .6em;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
width:503px;
}
#proDate{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
color:#CC6666;
float:right;
width:150px;
padding:.3em .6em .3em .6em;
margin:.6em .6em .6em 0;
}

#protext{
font-size:11px;
text-align:left;
margin:0 .6em 0 .6em;
height:80px;
background:ffffff;
padding:0 0 0 .6em;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
}

#promoConditions{
font-size:9px;
text-align:left;
line-height:100%;
float:left;
padding:0 .6em 0 .6em;
margin:.6em 0 0 .6em;
width:503px;
}

#proContact{
font-size:11px;
text-align:left;
font-weight:bold;
text-transform:uppercase;
background-image:url(/images/images/bgwhite.jpg);
background-repeat:repeat;
color:#CC6666;
float:right;
width:150px;
padding:.3em .6em .3em .6em;
margin:.6em .6em 0 0;
}

Answer 1

你有像 Firebug 这样的插件吗？这有助于向您展示任何可能覆盖背景颜色的规则。

另外，请确保在十六进制颜色编号之前包含 #。 （例如：#ffffff）

...看起来您正在使用 id 来选择 CSS，这是最具体的，所以它只能被以下方法覆盖：1）CSS 中的另一个 id 选择器，或 2）一个选择器在 CSS 中的任何地方都有一个 id 和一个类或标签名称，增加了它的特异性。 (CSS specificity made simple here)

Answer 2

检查您的定位...有时，在继承父属性时，对类或 ID 的显式说明是不够的。

比如，指定：

#yourid {background-color: #333;}

如果它的父级有指定的背景可能还不够。

你可能需要做 element.ID 之类的

div#yourid {background-color: #333;}

赶上我的漂移？

编辑：

是的，我可以看到孩子们继承自#longBox。正如我之前提到的那样，你最好瞄准。此外，需要验证缺少的 hash/pound/tic tac toe 东西，但大多数浏览器应该可以解释格式错误的 CSS。

Answer 3

图像工作的原因是因为它们是为孩子定义的新属性。父级从未有过用于 BG 的 IMG，因此当您脱离继承结构时，使用 1x1 彩色 pxel hack 肯定会起作用。总之：

尝试以下方法：

     #longBox{
        width:713px;
        height:225px;
        background-color:#FFFFFF;
        float:left;
        margin:1.2em 0 0 .7em;
        }

    div#specialLable{
    background-image:url(../images/01titleBar.png);
    margin: .5em .5em .5em .5em;
    width:689px;
    height:30px;
    font-size:1.2em;
    font-weight:bold;
    text-transform:uppercase;
    color:#667b90;
    padding:3px 0 0 6px;
    }


    div#promoMain{
    margin: 0 .5em .5em .6em;
    background-color:#ced5da;
    height:166px
    }

    div#proHeader{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    color:#CC6666;
    float:left;
    padding:.3em .6em .3em .6em;
    margin:.6em 0 0 .6em;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    width:503px;
    }

div#proDate{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    color:#CC6666;
    float:right;
    width:150px;
    padding:.3em .6em .3em .6em;
    margin:.6em .6em .6em 0;
    }

div#protext{
    font-size:11px;
    text-align:left;
    margin:0 .6em 0 .6em;
    height:80px;
    background: #ffffff;
    padding:0 0 0 .6em;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    }

    div#promoConditions{
    font-size:9px;
    text-align:left;
    line-height:100%;
    float:left;
    padding:0 .6em 0 .6em;
    margin:.6em 0 0 .6em;
    width:503px;
    }

    div#proContact{
    font-size:11px;
    text-align:left;
    font-weight:bold;
    text-transform:uppercase;
    background-image:url(/images/images/bgwhite.jpg);
    background-repeat:repeat;
    color:#CC6666;
    float:right;
    width:150px;
    padding:.3em .6em .3em .6em;
    margin:.6em .6em 0 0;
    }