Html 用2种颜色填充div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5054415/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fill div with 2 colors?
提问by raklos
given a div that is 500px wide, is there a way to fill the background with 2 different colors using css? I know it can be done with a background image, but just wondering if it can be done with bg color.
eg :
给定一个 500px 宽的 div，有没有办法使用 css 用 2 种不同颜色填充背景？我知道它可以用背景图像来完成，但只是想知道它是否可以用 bg 颜色来完成。例如：
回答by Andrew
You can't set multiple background colors, but you could set something like:
你不能设置多种背景颜色，但你可以设置如下：
div.twocolorish {
background-color: green;
border-left: 20px solid red;
}
As long as you don't need text to go over the part in red then this would take care of you in one div.
只要您不需要文本来覆盖红色部分，那么这将在一个 div 中照顾您。
回答by Mary Am
You can achieve 2 colors in 1 div by using pseudo-element :before
您可以使用伪元素在 1 个 div 中实现 2 种颜色：before
HTML:
HTML：
<div class="twocolordiv"></div>
CSS:
CSS：
.twocolordiv {
position: relative;
z-index: 9;
background: green;
width:500px;
height:100px;
}
.twocolordiv:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
right: 20%;
bottom: 0;
left: 0;
background: red;
}
回答by A. Markóczy
I ended up with this solution using linear gradients:
我最终使用线性渐变得到了这个解决方案：
.dualcol-test {
background: linear-gradient(to right, green 0%, green 80%, red 80%, red 100%);
} <div class="dualcol-test"> This div has a green and red background <br><br><br> </div>回答by jbutler483
Using the :beforecss attribute allows you to 'fill' a div with the two colours.
使用:beforecss 属性可以让你用两种颜色“填充”一个 div。
.myDiv {
position: relative; /*Parent MUST be relative*/
z-index: 9;
background: green;
/*Set width/height of the div in 'parent'*/
width: 100px;
height: 100px;
}
.myDiv:before {
content: "";
position: absolute; /*set 'child' to be absolute*/
z-index: -1; /*Make this lower so text appears in front*/
/*You can choose to align it left, right, top or bottom here*/
top: 0;
right: 0;
bottom: 60%;
left: 0;
background: red;
}<div class="myDiv">this is my div with multiple colours. It work's with text too!</div>An easily edited sample can be seen LIVE DEMO
可以看到一个易于编辑的样本LIVE DEMO
回答by jbutler483
No, you can only set one background-color. However, you could split your container into two and set a different backgorund-color for each one.
不，您只能设置一种背景颜色。但是，您可以将容器分成两个，并为每个容器设置不同的背景颜色。
回答by dianovich
This question got me thinking about how CSS3 would approach this problem.. and frankly the specification has me confused. That said, a couple of features that are creeping through the cracks: background-size and linear-gradient.
这个问题让我思考 CSS3 将如何解决这个问题……坦率地说，规范让我感到困惑。也就是说，有几个特征正在渗透裂缝：背景大小和线性渐变。
<style type="text/css">
#ji { width: 500px; height: 300px;
background:
-moz-linear-gradient(green, green) 0px 0px no-repeat,
-moz-linear-gradient(red, red) 200px 50px no-repeat,
-moz-linear-gradient(blue, blue) 0px 250px no-repeat,
-moz-linear-gradient(gray, gray) 300px 125px no-repeat;
-moz-background-size: 450px 50px, 50px 200px, 250px 250px, 50px 250px;
}
</style>
<div id="ji">
</div>
Give this a go :)
试一试:)
I'm sure there are better approaches to this problem, but it does demonstrate that we'll be afforded greater flexibility with CSS backgrounds (one day).
我确信有更好的方法来解决这个问题，但它确实表明我们将通过 CSS 背景获得更大的灵活性（有一天）。
Edit:Forgot to mention that this will only work in Firefox, though there are Webkit equivalents for linear-gradient and background size
编辑：忘了提到这只能在 Firefox 中工作，尽管有线性渐变和背景大小的 Webkit 等效项
回答by thirtydot
Using background-image/ repeat-yis the easiest solution - however, maybe you want to change colours or widths or something with Javascript.
使用background-image/repeat-y是最简单的解决方案 - 但是，也许您想使用 Javascript 更改颜色或宽度或其他内容。
Here's a way to do this which allows text everywhere.
这是一种允许文本无处不在的方法。
HTML:
HTML：
<div id="container"><div class="offset">text</div></div>
CSS:
CSS：
#container {
background: #ccc;
border-right: 40px solid #aaa
}
.offset {
margin-right: -40px;
zoom: 1; /* to fix IE7 and IE6 */
position: relative /* to fix IE6 */
}
回答by gutierrezalex
Better late then never. Thought this might help:
迟到总比没有好。认为这可能会有所帮助：
The htmls
htmls
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
The csss
css
#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }
You can view this @ http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout
你可以查看这个@ http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout
回答by AlexBMAS
You could you inset box shadow, and change the shadow to whatever colour you required.
您可以插入框阴影，并将阴影更改为您需要的任何颜色。
CSS
CSS
-moz-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
-webkit-box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
box-shadow: inset 50px 0px 0px 0px rgba(156, 244, 255, 1);
