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

问题描述：

我有一系列的分层div，我设置了div class style，它们都显示出来（填充，字体颜色等）。但是，背景颜色不适用于叠加div。作为测试，我尝试设置边框和边框样式，除边框颜色外，它们都工作得很好，没有显示出来，而且额外样式的边框保持黑色。

每个div都有一个唯一的ID，并且背景颜色不工作的那些嵌套（并排）在一个容器div中。我一直在试图理解，如果嵌套的div是采取父div的背景颜色，但我试图改变父母的溢出，并没有任何影响。

作为一项解决方案，我创建了1 x 1px jpg的正确背景色，并设置了divs背景图像，这是工作的。但这是一种黑客行为，我不知道为什么所有的样式元素都能工作，除了背景颜色。

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

（也作为另外，我用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; 
}

一些粘贴代码将是很好的。最好没有太多的绒毛，只是尝试创建一个尽可能少的代码的HTML文件，仍然会重现错误，并将它粘贴到pastebay.com上，如果它太长而不能在这里发布 – 2009-11-23 20:32:53

我已经添加了所需的代码。感谢您的关注 – Anthony 2009-11-23 21:16:10

我一直将div的class属性设置为css中定义的类之一。 – ChadNC 2009-11-23 21:28:19

答

图像工作的原因是因为它们是为孩子定义的新属性。父母从未拥有过一个BG的IMG，所以使用1x1彩色pxel黑客肯定会工作，因为你摆脱了继承结构。总之：

尝试以下操作：

 #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; 
    }

谢谢。我认为这是票。 – Anthony 2009-11-23 21:45:11

我几乎可以保证你在这里添加了'div'，而不是1px图像。您不应该需要使用白色背景图像。 – keithjgrant 2009-11-23 22:02:25

啊，我明白了，这里还有另一层次的血统，我起初没有注意到。对孩子使用'background-image：none;'。 – keithjgrant 2009-11-23 22:14:26

答

你有类似Firebug插件？这可以帮助您向您展示任何可能覆盖背景颜色的规则。

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

...它看起来像你使用id来选择CSS，这是最具体的，所以它只能被覆盖：1）另一个id选择器在CSS ，或者2）CSS中任何地方的选择器，包含一个id和一个类或标签名称，从而增加其特殊性。（CSS specificity made simple here）

答

检查您的目标...有时候，当它继承父属性时，对类或ID的显式指令是不够的。

这么喜欢，规定：

#yourid {background-color: #333;}

可能不够，如果它的父有指定的backgound。

你可能需要做element.ID像

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

明白我的意思？

编辑：

是的，我可以看到孩子们从#longBox继承。正如我之前提到的那样，最好是针对你。此外，缺少哈希/磅/井字游戏的事情需要验证，但大多数浏览器应该解释格式错误的CSS确定。

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

相关推荐