我有一个居中的div布局。背景中div的左侧应为白色,右侧应为绿色。两者都应扩展到无穷大。
我认为它应该很简单,但我现在还没有理解。任何简单的方案? 谢谢!
-----------------------------------------------------
(div 1) __________________________
|(div 2) | |
| | |
| | |
<- white | white | green | green ->
| | |
| | |
|________________|_________|
------------------------------------------------------
答案 0 :(得分:9)
使用::after
和::before
伪元素。这样你甚至可以得到三种颜色并做意大利国旗!
div {
height:300px;
width:100%;
outline:thin solid black;
position:relative;
background:white;
}
div::after, div::before {
height:300px;
content:' ';
position: absolute;
top: 0;
width: 33%;
}
div::after {
right: 0;
background-color: red;
}
div::before {
left: 0;
background-color: green;
}
这是一个小提琴:http://jsfiddle.net/g8p9pn1v/
结果:
答案 1 :(得分:6)
将具有两种颜色的背景图像添加到外部div并允许浏览器缩放它(而不是平铺它)。
每种颜色应该填充图像宽度的50%,以确保颜色永远不会泄漏。
甚至可能将图像放在内部div的后面。
有关如何拉伸图像的提示,请参阅此问题:CSS Background Repeat
答案 2 :(得分:1)
你可以在外面有两个div,然后在每个div中都有一个div。分别右对齐和左对齐。像这样:
-----------------------------------------------------
(div) | (div)
_________________|_________
|(div) | (div) |
| | |
| | |
<- white | white | green | green ->
| | |
| | |
|________________|_________|
|
------------------------------------------------------
答案 3 :(得分:1)
如何创建两个div bg-left和bg-right,其中一个绝对位置在一个全宽容器内。由于它们是绝对定位的,因此您可以在它们之上对内容进行分层。例如,使用bootstrap标记:
<div class="fullwidth">
<div class="bg-left"></div>
<div class="bg-right"></div>
<div class="container">
<div class="row">
<div class="col-xs-6">
Insert left side content here...
</div>
<div class="col-xs-6">
Insert right side content here...
</div>
</div>
</div>
</div>
然后你的css:
.fullwidth {
position: relative;
width: 100%;
}
.bg-left {
background: #000;
left: 0;
top: 0;
bottom: 0;
position: absolute;
width: 50%;
}
.bg-right {
right: 0;
top: 0;
bottom: 0;
background: #ddd;
position: absolute;
width: 50%;
}
答案 4 :(得分:0)
我会在div中放入另外两个div并给它们适当的大小和背景颜色
答案 5 :(得分:0)
您可以使用渐变。这是一个网站,您可以在其中获取所需内容的跨浏览器代码。
http://colorzilla.com/gradient-editor/
在开头使用它可能有点混乱,但我发现它是一个非常强大的工具。
问候!
答案 6 :(得分:0)
2021 年最简单的方式:
.container {
background: linear-gradient(
to right,
red 0%,
red 50%,
black 50%,
black 100%
);
}