как сделать фоновый рисунок дива двухцветным

Question

Допустим левая часть дива должна иметь красный цвет, а правая - синий.
Как это сделать? В идеях было только поставить на красный див картинку с синим фоном и поместить текст поверх этого всего в див, который имеет z значение большее чем картинка. Я верстаю резиновую страницу, это не подходит. Еще варианты?

Answer 1

Использовал два дива разных цветов, каждый из которых заполнял левую и, соответственно, правую часть родительского дива на 50%. Они стали находится на одной линии, когда я добавил им float:left/right

Answer 2

Линейный градиент же...

*{margin:0}body{height:100vh;color:white;text-align:center;background-color:rgb(255,255,255);background-image:linear-gradient(rgba(0,239,255,.57) 50%,rgba(255,0,224,.55) 50%),url(https://i.stack.imgur.com/m9NKc.png);background-position:0% 0%;background-repeat:no-repeat;background-size:auto}

.redblue {
  height: 100px; width: 100%;
  background-image: linear-gradient(90deg, #ff0000 50%, #0000ff 50%);
}
.yellowgreen {
  height: 100px; width: 100px;
  background-image: linear-gradient(45deg, #FFC107 50%, #4CAF50 50%);
}

<div class="redblue"><br>Красно-синий<br><br>фон</div>
<div class="yellowgreen"><br>Жёлто-зелёный<br><br>фон</div>

Answer 3

Можно не добавлять второй див, а использовать градиент:

background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,0,0,1) 50%, rgba(121,9,9,1) 50%, rgba(0,212,255,1) 50%);

Есть даже отличный генератор градиентов https://cssgradient.io

БЛОГ НА HUSL

как сделать фоновый рисунок дива двухцветным

Ответы (3 шт):