Question

我需要一些帮助，设置50% of the div颜色蓝色，另一个50% of the div颜色红色，水平。我怎样才能做到这一点？谢谢！

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

Answer 2

我猜这可能对你有用：

#divname {
 background:linear-gradient(#ff0000,#0000ff);
}

Answer 3

使用:after伪选择器的纯css解决方案：http://jsfiddle.net/eLwdbgat/

div {
    width: 80%;
    height: 300px;
    background-color: red;
}

div::after {
    content:'';
    position: fixed;
    height: 300px;
    width: 40%;
    left: 40%;
    background: lightgrey;
}

Answer 4

你可能想要一个＆＃34;渐变＆＃34;。这是代码。

＆＃13;

.box {
  height: 200px;
  width: 200px;
  /* fallback */
  background-color: #1a82f7;

  /* Safari, Chrome 1-9 */
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));

  /* Safari, Chrome 10+ */
  background: -webkit-linear-gradient(top, #2F2727, #1a82f7);

  /* Firefox*/
  background: -moz-linear-gradient(top, #2F2727, #1a82f7);

  /* IE */
  background: -ms-linear-gradient(top, #2F2727, #1a82f7);

  /* Opera*/
  background: -o-linear-gradient(top, #2F2727, #1a82f7);
}

＆＃13;

<div class='box'></div>

＆＃13;

如何在div中设置2种背景颜色

4 个答案: