Заполнить div двумя цветами?

Ответ 1

Вы не можете установить несколько цветов фона, но вы можете установить что-то вроде:

div.twocolorish {
    background-color: green;
    border-left: 20px solid red;
}

Пока вам не нужен текст, чтобы перейти к красной части, это позаботится о вас в одном div.

Ответ 2

Вы можете достичь двух цветов в 1 div с помощью псевдоэлемента : до

HTML:

<div class="twocolordiv"></div>

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

Ответ 3

Нет, вы можете установить только один фоновый цвет. Тем не менее, вы можете разделить свой контейнер на два и установить для каждого из них другой цвет backgorund.

Ответ 4

Этот вопрос заставил меня задуматься о том, как 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>

Отдайте это:):)

Я уверен, что есть более эффективные подходы к этой проблеме, но он демонстрирует, что нам будет предоставлена ​​большая гибкость с фонов CSS (один день).

Изменить: Забыл упомянуть, что это будет работать только в Firefox, хотя существуют эквиваленты Webkit для линейного градиента и размера фона

Ответ 5

Используя атрибут :before css, вы можете "заполнить" 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 with text too!</div>

Ответ 6

Использование background-image/repeat-y является самым простым решением - однако, возможно, вы хотите изменить цвета или ширину или что-то с помощью Javascript.

Вот способ сделать это, что позволяет везде текст.

http://jsfiddle.net/WQ8CG/

HTML:

<div id="container"><div class="offset">text</div></div>

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 */
}

Ответ 7

Лучше поздно, потом никогда. Думал, что это может помочь:

htmls

<div id="content"> 
    <div id="left"></div>
    <div id="right"></div>
</div>

csss

#content { background-color: #F1EBD9; }
#left { float: left; width: 14em; }
#right { margin-left: 14em; background-color: #FFF; }

Вы можете просмотреть это @http://alexandergutierrez.info/stretch-background-color-in-a-two-col-layout

Ответ 8

Вы можете вставить тень окна и изменить тень на любой цвет, который вам нужен.

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);

Ответ 9

Я закончил с этим решением, используя линейные градиенты:

    .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>