html - 如何在一个div中设置2种背景颜色

Question

我需要一些帮助来设置 50% of the div is color blue 和另一个 50% of the div is color 红色，水平。我怎样才能做到这一点？谢谢!

Answer 1

可能结束了，但这里是http://jsfiddle.net/e9ypqy5t/6/

.repeat {
  width: 100px;
  height: 100px;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 50px,
      red 50px,
      red 100px 
    );
}

这里是使用百分比的例子 http://jsfiddle.net/e9ypqy5t/8/

.repeat {
  width: 100%;
  height: 100vh;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 50%,
      red 50%,
      red 100%
    );
}

此方法还允许您添加更多颜色线，如下所示:http://jsfiddle.net/e9ypqy5t/10/

.repeat {
  width: 100%;
  height: 100vh;
  background-image: 
    repeating-linear-gradient(
      180deg,
      blue,
      blue 10%,
      red 10%,
      red 20%
    );
}