我正在网站上工作并在中间使用960容器,现在唯一的问题是设计师在某些div
上使用不同的背景颜色。
所以我现在的代码是:
<div id="content">
<!-- the content needs to 960 on the width only the background need the full width of the page -->
<div class="whitebackground">
<!-- content -->
</div>
<div class="bluebackground">
<!-- content -->
</div>
</div>
css:
#content {
margin: 0px auto;
min-height: 700px;
position: relative;
width: 960px;
}
.whitebackground{
width: 100%;
background:#FFF;
}
.bluebackground{
width: 100%;
background:#0054fe;
}
现在问题是div
的背景颜色当然只在内容div
内。有没有办法让div
的颜色超出内容div
并超出页面的宽度?
以下是工作代码http://jsfiddle.net/6cJVV/
答案 0 :(得分:3)
你可以这样做:
.object {background-size: 100% 100%;}
设置如下:
.object {background-size: width height;}
答案 1 :(得分:1)
您必须将外部div设置为全宽,然后将width: 960px; margin: 0 auto
设置为内部div
看看这个:Codepen
答案 2 :(得分:0)
我将内容更改为一个类,因此我可以将其关闭并重新打开。我的代码现在看起来像这样:
<div class="whitebackground">
<div class="content">
</div>
</div>
<div class="bluebackground">
<div class="content">
</div>
</div>