如何将多种背景色应用于一个div
在某些情况下，我应该对一个div使用多种背景颜色。对我来说，比使用背景图片或其他div更好。但是，我找不到更简单的CSS使用方式。因此，我需要某些情况的帮助。
（1）我要建立“ A”。为此，我写道：
div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }
但是，编写完该代码后，它将类似于“ B”。但是，我要像“ A”一样。那么，如何通过css / css3做到这一点（不增加更多的div）？
（2）是否可以使一部分比另一部分小？例如，在“ C”处，蓝色（在高度上）小于其他部分。如何在一个div上缩小一个部分，如“ C”（而不在“
C”上添加其他div），如何将多种背景色应用于一个div？
更新：@Mohammad回答后，我已经尝试过这种方式。但是，对于“C”场景，我无法降低蓝色部分的高度。你能告诉我我该怎么做吗？
问题答案：
A
div实际上可以在没有:before或:after选择器的情况下进行，但第一次尝试使用线性渐变。唯一的区别是您必须指定4个位置。暗灰色从0到50％，亮灰色从50％到100％，如下所示：
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);
如您所知，B div是由具有2个位置的线性渐变制成的，如下所示：
background: linear-gradient(to right, #9c9e9f 0%,#f6f6f6 100%);
对于C div，我使用与div A相同的梯度：
background: linear-gradient(to right, #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
但是这一次我使用:after白色背景的选择器，就像div的第二部分较小一样。 * 请注意，我在下面添加了更好的选择。
查看此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>
对于C div，还有一种替代方法是不使用白色背景来隐藏第二部分的一部分。而是使第二部分透明，并使用:after选择器充当具有所需位置和大小的彩色背景。
有关此更新的解决方案，请参见下面的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>
-
问题内容： 假设我要在CSS中渲染箭头，箭头应具有头部，尾部和灵活的宽度，以便可以包含文本。我当然可以创建多个div来获得所需的内容，但是如何在CSS3中完成呢？ 我可以使用多个背景图片： 的HTML： 这给了我一个带有箭头和尾巴的透明中间部分。似乎不可能在中间部分指定颜色。 仅使用一张背景图像，您可以执行以下操作： 我知道这在很多方面都是可行的，但是背景颜色属性是否真的从速记定义中丢失了？ 问题
-
问题内容： 我知道如何使用CSS3指定多个背景图片并使用不同的选项修改它们的显示方式。 目前，我有一个，它需要在左侧宽度的30％处使用不同的颜色： 而不是加载完全为灰色的图像，我该如何指定颜色而又没有其他s？ 问题答案： 您真的不能—背景颜色完全适用于元素背景。保持简单。 您可以改为为背景定义带有锐利颜色边界的CSS渐变，例如
-
问题内容： 我对html中body标记的大小感到困惑。 我有一个艰难的代码如下： 为什么背景会覆盖整个页面？我以为背景只能覆盖100px， 请为我解释一下，谢谢您的帮助！ 问题答案： 这的确令人费解，但它是在CSS2.1规范规定，第14.2背景：如果计算出的值是和的计算值是对元素（如东西都默认情况下），浏览器必须改用的计算值元素的背景属性，并且不得渲染背景（即使其透明）。也就是说，如果缺少自己的背
-
我正在将PNG转换为JPG。透明背景默认变为黑色。我需要它是白色的。
-
问题内容： 我正在尝试将2种不同的背景色添加到同一CSS类中。 前50％（考虑总宽度）是否可以有一种背景色，而其余的可以有另一种背景色？如果无法实现，那么有人可以建议我实现这一目标吗？ 问题答案： 只需使用 线性渐变 作为背景，您就可以轻松调整方向，颜色以及每种颜色的百分比： 或使用 伪元素 和简单的 背景颜色， 然后简单地控制伪元素的位置/大小即可控制两个背景： 如果你想要更多 您可以在渐变内组
-
问题内容： 以下代码中的行无效。为什么？我该如何解决？ 问题答案： 您需要调用小部件。默认情况下，a不会填充背景。 有关更多信息，请参见该属性的文档。 如果要使用任意背景色，则需要修改小部件的调色板：