Html 如何将多种背景颜色应用于一个 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19081355/
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
How can apply multiple background color to one div
提问by user1896653
I've some scenario where I should use multiple background color to one div. It's better for me rather than using background images or additional div. But, I can't find easier way to use it by CSS. So, I need help about some scenario. Please, see the image:
我有一些场景，我应该对一个 div 使用多种背景颜色。这对我来说更好，而不是使用背景图像或额外的 div。但是，我找不到通过 CSS 使用它的更简单方法。所以，我需要有关某些情况的帮助。请看图：
(1) I want to build "A". for that I wrote:
(1) 我想建立“A”。为此，我写道：
div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }
But, after writing that code, it'll like "B". But, I want exactly like "A". So, by css/css3 how can I do it(without adding more divs)?
但是，在编写该代码后，它会喜欢“B”。但是，我想要完全像“A”。那么，通过 css/css3 我该怎么做（不添加更多 div）？
(2) Is it possible to make one portion smaller than other portion? For example, at "C", blue color is smaller(at height) than the other portion. How, can I apply multiple background color to one div with making one portion smaller like "C"(without adding additional divs to "C")?
(2) 可以使一部分比另一部分小吗？例如，在“C”处，蓝色比其他部分小（在高度上）。如何将多个背景颜色应用到一个 div 并使一部分更小，例如“C”（而不向“C”添加额外的 div）？
Update:
After @Mohammad's answer, I've tried with that way. But, for "C" scenario, I can't decrease the height of blue portion. Can you please, tell me how can I do it?
jsfiddle.net/mFjQ6
更新：在@Mohammad 的回答之后，我已经尝试过这种方式。但是，对于“C”场景，我不能降低蓝色部分的高度。你能告诉我我该怎么做吗？
jsfiddle.net/mFjQ6
回答by service-paradis
The A div can actually be made without :beforeor :afterselector but using linear gradient as your first try. The only difference is that you must specify 4 positions. Dark grey from 0 to 50% and ligth grey from 50% to 100% like this:
A div 实际上可以在没有:beforeor:after选择器的情况下制作，但使用线性渐变作为您的第一次尝试。唯一的区别是您必须指定 4 个位置。从 0 到 50% 的深灰色和从 50% 到 100% 的浅灰色像这样：
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);
As you know, B div is made from a linear gradient having 2 positions like this:
如您所知，B div 由具有 2 个位置的线性渐变组成，如下所示：
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%);
For the C div, i use the same kind of gradient as div A ike this:
对于 C div，我使用与 div A 相同类型的渐变，如下所示：
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
But this time i used the :afterselector with a white background like if the second part of your div was smaller. * Please note that I added a better alternative below.
但是这次我使用:after了白色背景的选择器，就像你的 div 的第二部分更小一样。*请注意，我在下面添加了一个更好的选择。
Check this jsfiddleor the snippet below for complete cross-browser code.
检查此jsfiddle或下面的代码段以获取完整的跨浏览器代码。
div{
position:relative;
width:80%;
height:100px;
color:red;
text-align:center;
line-height:100px;
margin-bottom:10px;
}
.a{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#f6f6f6), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}
.b{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(100%,#f6f6f6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#f6f6f6 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6',GradientType=1 ); /* IE6-9 */
}
.c{
background: #9c9e9f; /* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#9c9e9f), color-stop(50%,#9c9e9f), color-stop(50%,#33ccff), color-stop(100%,#33ccff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#33ccff',GradientType=1 ); /* IE6-9 */
}
.c:after{
content:"";
position:absolute;
right:0;
bottom:0;
width:50%;
height:20%;
background-color:white;
}<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>There is also an alternative for the C div without using a white background to hide the a part of the second section.
Instead, we make the second part transparent and we use the :afterselector to act as a colored background with the desired position and size.
C div 也有一个替代方案，不使用白色背景来隐藏第二部分的一部分。相反，我们使第二部分透明，并使用:after选择器作为具有所需位置和大小的彩色背景。
See this jsfiddleor the snippet below for this updated solution.
有关此更新的解决方案，请参阅此jsfiddle或下面的代码段。
div {
position: relative;
width: 80%;
height: 100px;
color: red;
text-align: center;
line-height: 100px;
margin-bottom: 10px;
}
.a {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, #f6f6f6), color-stop(100%, #f6f6f6));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
/* IE6-9 */
}
.b {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(100%, #f6f6f6));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #f6f6f6 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #f6f6f6 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#f6f6f6', GradientType=1);
/* IE6-9 */
}
.c {
background: #9c9e9f;
/* Old browsers */
background: -moz-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, #9c9e9f), color-stop(50%, #9c9e9f), color-stop(50%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* IE10+ */
background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9c9e9f', endColorstr='#ffffff00', GradientType=1);
/* IE6-9 */
}
.c:after {
content: "";
position: absolute;
right: 0;
top: 0;
width: 50%;
height: 80%;
background-color: #33ccff;
z-index: -1
}<div class="a">A</div>
<div class="b">B</div>
<div class="c">C</div>回答by M a m a D
Sorry for misunderstanding, from what I understood you want your DIV to have three different colors with different heights. This is the output of my code:
抱歉误会，据我所知，您希望您的 DIV 具有三种不同高度的不同颜色。这是我的代码的输出：
,
,
If this is what you want try this code:
如果这是你想要的试试这个代码：
div {
height: 100px;
width:400px;
position: relative;
}
.c {
background: blue; /* Old browsers */
}
.c:after{
content: '';
position: absolute;
width:20%;
left:0;
height:110%;
background: yellow;
}
.c:before{
content: '';
position: absolute;
width:40%;
left:60%;
height:140%;
background: green;
}<div class="c"></div>回答by Axel B
You could apply both background-color and border to make it look like 2 colors.
您可以同时应用背景颜色和边框，使其看起来像 2 种颜色。
div.A { width: 50px; background-color: #9c9e9f; border-right: 50px solid #f6f6f6; }
The border should have the same size as the width.
边框的大小应与宽度相同。
回答by M a m a D
it is compatible with all the browsers, change values to fit your application
它与所有浏览器兼容，更改值以适合您的应用程序
background: #fdfdfd;
background: -moz-linear-gradient(top, #fdfdfd 0%, #f6f6f6 60%, #f2f2f2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fdfdfd), color-stop(60%,#f6f6f6), color-stop(100%,#f2f2f2));
background: -webkit-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -o-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: -ms-linear-gradient(top, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
background: linear-gradient(to bottom, #fdfdfd 0%,#f6f6f6 60%,#f2f2f2 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfdfd', endColorstr='#f2f2f2',GradientType=0
回答by LinkinTED
With :after and :before you can do that.
使用 :after 和 :before 你可以做到这一点。
HTML:
HTML：
<div class="a"> </div>
<div class="b"> </div>
<div class="c"> </div>
CSS:
CSS：
div {
height: 100px;
position: relative;
}
.a {
background: #9C9E9F;
}
.b {
background: linear-gradient(to right, #9c9e9f, #f6f6f6);
}
.a:after, .c:before, .c:after {
content: '';
width: 50%;
height: 100%;
top: 0;
right: 0;
display: block;
position: absolute;
}
.a:after {
background: #f6f6f6;
}
.c:before {
background: #9c9e9f;
left: 0;
}
.c:after {
background: #33CCFF;
right: 0;
height: 80%;
}
And a demo.
和一个演示。
回答by WesJ
You can create something like c using CSS multiple-backgrounds.
您可以使用 CSS 多重背景创建类似 c 的内容。
div {
background: linear-gradient(red, red),
linear-gradient(blue, blue),
linear-gradient(green, green);
background-size: 30% 50%,
30% 60%,
40% 80%;
background-position: 0% top,
calc(30% * 100 / (100 - 30)) top,
calc(60% * 100 / (100 - 40)) top;
background-repeat: no-repeat;
}
Note, you still have to use linear-gradients for background types, because CSS will not allow you to control the background-size of a single color layer. So here we just make a single-color gradient. Then you can control the size/position of each of those blocks of color independently. You also have to make sure they don't repeat, or they'll just expand and cover the whole image.
请注意，您仍然必须对背景类型使用线性渐变，因为 CSS 不允许您控制单个颜色图层的背景大小。所以这里我们只做一个单色渐变。然后您可以独立控制每个色块的大小/位置。您还必须确保它们不会重复，否则它们只会扩展并覆盖整个图像。
The trickiest part here is background-position. A background-position of 0% puts your element's left edge at the left. 100% puts its right edge at the right. 50% centers is middle.
这里最棘手的部分是背景位置。0% 的背景位置将元素的左边缘放在左侧。100% 将其右边缘放在右侧。50% 的中心是中间的。
For a fun bit of math to solve that, you can guess the transform is probably linear, and just solve two little slope-intercept equations.
对于一个有趣的数学来解决这个问题，你可以猜测变换可能是线性的，只需解决两个小斜率截距方程。
// (at 0%, the div's left edge is 0% from the left)
0 = m * 0 + b
// (at 100%, the div's right edge is 100% - width% from the left)
100 = m * (100 - width) + b
b = 0, m = 100 / (100 - width)
so to position our 40% wide div 60% from the left, we put it at 60% * 100 / (100 - 40) (or use css-calc).
因此，要将 40% 宽的 div 定位在左侧 60% 处，我们将其放置在 60% * 100 / (100 - 40) （或使用 css-calc）。
