在某些情况下,我应该对一个 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)?
更新:
在@Mohammad 的回答之后,我已经尝试过这种方式。但是,对于“C”场景,我无法降低蓝色部分的高度。你能告诉我我该怎么做吗?
jsfiddle.net/mFjQ6
最佳答案
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,还有一个替代方法,即不使用白色背景来隐藏第二部分的 a 部分。
相反,我们将第二部分设为透明,并使用 :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>
关于html - 如何将多种背景颜色应用于一个div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19081355/