DIV的背景图像显示出来，但背景颜色不

StackOverflow https://stackoverflow.com/questions/1785729

  •  21-09-2019
  •  | 
  •  

题

我有一个轻微的CSS问题。

我有一系列分层的div和我设置的div类样式，它们都显示出来（填充，字体颜色等）。然而，背景色将用于在该叠置的div不工作。

作为一个测试，我试图设置边框和边框样式，和他们所有的工作为好，除了边框颜色，它并没有显示出来，并有额外的造型边框保持黑色。

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

作为一个工作我周围创建了一个1×1像素的JPG正确的背景颜色，并设置背景的div图像，其工作。但它是一个黑客，我没什么好不知道为什么所有的时尚元素工作，除了背景颜色。

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

（也作为另外，我使用Dreamweaver写入代码和背景色在预览模式中显示，但不要在Firefox，铬，或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;
}
有帮助吗？

解决方案

图像被工作的原因是因为它们被定义为子新attribs。父从未有过的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;
    }

其他提示

你有类似Firebug插件？这可以帮助很多显示你可能被覆盖的背景颜色的任何规则。

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

...看起来你正在使用的ID选择CSS，这是最具体的，所以它只能是重载是：1）另一个id选择进一步下跌的CSS，或2）选择与这两个ID和一个类或者标签名称的CSS的任何地方，增加其特异性。 （ CSS特异性变得简单这里）

检查您的定位......有时明确指令类或ID是不够的，当它继承父属性。

所以像，指定：

#yourid {background-color: #333;}

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

您可能需要做element.ID像

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

捉住我的漂移

编辑：

是的，我可以看到孩子们从#longBox继承。这是最适合你的目标正如我前面提到。此外，缺少哈希/英镑/井字事情都需要验证，但大多数浏览器应该解释畸形CSS ok了。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top