只有css的多种背景颜色

Question

我想要一个具有多种背景颜色的元素？类比:

<div class="multiplebackground">
  <div style="background-color:red"></div>
  <div style="background-color:green"></div>
  <div style="background-color:blue"></div>
</div>

但如果我只有一个带有一些文字内容的div:

<div class="multiplebackground">
  ...
</div>

.multiplebackground {
  ???
}

还是不可能？

Answer 1

你可以用渐变来实现这一点.您只需要从颜色混合到相同的颜色,然后在零像素上混合到下一个颜色,依此类推.

.Neapolitan {
  height: 200px;
  width: 200px;
  background: linear-gradient(to bottom, red 0%, red 33%, green 33%, green 66%, blue 66%, blue 100%);
}

<div class="Neapolitan">

</div>

(旧版浏览器可以使用前缀替代品和IE特定代码)