html - 仅使用 css 的多种背景颜色

Question

我想要一个元素有多种背景颜色？ 模拟:

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

但是如果我只有 1 个包含一些文本内容的 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 特定代码适用于旧版浏览器)