gpt4 book ai didi

css - div 背景图像出现,但背景颜色没有

转载 作者:行者123 更新时间:2023-11-28 02:18:36 28 4
gpt4 key购买 nike

我有一个小的 CSS 问题。

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

作为测试,我尝试设置边框和边框样式,它们都工作正常,除了边框颜色,它没有显示,带有额外样式的边框保持黑色。

每个 div 都有一个唯一的 id,背景颜色不起作用的那些被嵌套(并排)在一个容器 div 中。我一直试图了解嵌套 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;
}

最佳答案

图像之所以有效,是因为它们是为 child 定义的新属性。 parent 从来没有 BG 的 IMG,因此使用 1x1 彩色像素 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;
}

关于css - div 背景图像出现,但背景颜色没有,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1785729/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com