Как применить несколько цветов фона к одному div

У меня есть сценарий, где я должен использовать несколько цветов фона для одного div. Это лучше для меня, чем для использования фоновых изображений или дополнительного div. Но я не могу найти более простой способ использовать его с помощью CSS. Итак, мне нужна помощь по некоторым сценариям. Пожалуйста, посмотрите изображение:

(1) Я хочу построить "А". за что я написал:

div.A { background: linear-gradient(to right, #9c9e9f, #f6f6f6); }

Но, написав этот код, ему понравится "B". Но я хочу точно так же, как "А". Итак, css/css3, как я могу это сделать (без добавления дополнительных div)?

(2) Можно ли сделать одну часть меньшей, чем другая? Например, при "С" синий цвет меньше (на высоте), чем в другой части. Как, можно ли применить несколько цветов фона к одному div, сделав одну порцию меньшей, чем "C" (без добавления дополнительных разделов на "C" )?

Обновление: После ответа @Mohammad я попытался с этим. Но для сценария "С" я не могу уменьшить высоту синей части. Не могли бы вы рассказать мне, как я могу это сделать?

jsfiddle.net/mFjQ6

Ответ 1

А div фактически можно сделать без селектора :before или :after, но с помощью линейного градиента в качестве первой попытки. Единственное отличие состоит в том, что вы должны указать 4 позиции. Темно-серый от 0 до 50% и серый серый от 50% до 100%:

background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);

Как вы знаете, B div производится из линейного градиента, имеющего два положения:

background: linear-gradient(to right,  #9c9e9f 0%,#f6f6f6 100%);

Для C div я использую тот же тип градиента, что и div A ike:

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>

Ответ 2

Извините за непонимание, из того, что я понял, вы хотите, чтобы ваш DIV имел три разных цвета с разной высотой. Это результат моего кода:

Если вы хотите попробовать этот код:

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>

Ответ 3

Вы можете применить как фоновый цвет, так и границу, чтобы сделать его похожим на 2 цвета.

div.A { width: 50px; background-color: #9c9e9f; border-right: 50px solid #f6f6f6; }

Граница должна иметь тот же размер, что и ширина.

Ответ 4

он совместим со всеми браузерами, меняет значения, соответствующие вашему приложению

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

Ответ 5

С помощью: after и: прежде чем вы сможете это сделать.

HTML:

<div class="a"> </div>
<div class="b"> </div>
<div class="c"> </div>

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%;
}

И демо.