具有 3 种背景颜色的主体背景

Question

是否可以将车身颜色设置为 3 种不同的颜色 - 我正在创建一个基于苏格兰俱乐部的网站（只是为了好玩），我希望更改背景颜色以代表俱乐部的颜色，即 - Rangers红色>白色>蓝色和凯尔特绿色>白色>金色

这是 3 种颜色的示例 -

Answer 1

线性梯度法

您可以使用linear-gradient 背景图像，如下面的sn-p。将一种颜色的颜色停止点作为下一种颜色的起点会产生块状效果，而不是实际的渐变效果。

recent versions of all browsers 支持线性渐变。如果您想支持 IE9 及更低版本，则可能需要查看一些库（如 CSS3 PIE）或使用不同的方法，如 box-shadow（插图）或一些额外（或伪）元素。

水平条纹：

要创建水平条纹，不需要指定角度（或边），因为默认角度为 0 度（或 to bottom，如 jedrzejchalubek 的回答中提到的）。

body {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(red 33.33%, white 33.33%, white 66.66%, blue 66.66%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0px;
}

<!-- to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

竖条纹：

要创建垂直条纹，您需要将角度 (90deg) 作为渐变的第一个参数（或指定 to right 表示渐变从屏幕左侧到右侧）。

body {
  height: 100vh;
  width: 100vw;
  background-image: linear-gradient(90deg, red 33.33%, white 33.33%, white 66.66%, blue 66.66%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  margin: 0px;
}

<!-- to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

---

使用视口单位的箱形阴影方法

您可以使用插图box-shadow 以及视口单元，也可以仅使用单个元素来产生条纹效果。这甚至会被 IE9 支持，因为 box-shadow 和 viewport units 都受支持。

水平条纹：

要创建水平条纹，box-shadows 的 Y 轴偏移量应该以相等的分割分配。这里我们使用 33.33vh、66.66vh 和 99.99vh，因为只有 3 色分色。

body {
  height: 100vh;
  width: 100vw;
  box-shadow: inset 0px 33.33vh 0px red, inset 0px 66.66vh 0px white, inset 0px 99.99vh 0px blue;
  margin: 0px;
}

竖条纹：

这与创建水平条纹的方法非常相似，只是这里我们更改了box-shadow 的 X 轴偏移量。

body {
  height: 100vh;
  width: 100vw;
  box-shadow: inset 33.33vw 0px 0px red, inset 66.66vw 0px 0px white, inset 99.99vw 0px 0px  blue;
  margin: 0px;
}

---

伪元素方法

这种方法具有最高的浏览器支持，因为它不使用视口单元，而且即使 IE8 也支持 pseudo-elements with a single-colon syntax。但是，这种方法的缺点是，如果您需要拆分 4 种或更多颜色，则需要额外的元素。

水平条纹：

为了创建水平条纹，伪元素的高度为body 的 33.33%，而宽度为 100%。一个伪元素位于顶部，另一个位于底部。

html {
  height: 100%;
}
body {
  position: relative;
  height: 100%;
  margin: 0;
}
body:before,
body:after {
  position: absolute;
  content: '';
  left: 0px;
  width: 100%;
  height: 33.33%;
}
body:before {
  top: 0px;
  background: blue;
}
body:after {
  bottom: 0px;
  background: red;
}

竖条纹：

为了创建垂直条纹，伪元素的宽度为body 的 33.33%，而高度为 100%。一个伪元素位于左侧，另一个位于右侧。

html {
  height: 100%;
}
body {
  position: relative;
  height: 100%;
  margin: 0;
}
body:before,
body:after {
  position: absolute;
  content: '';
  top: 0px;
  height: 100%;
  width: 33.33%;
}
body:before {
  left: 0px;
  background: blue;
}
body:after {
  right: 0px;
  background: red;
}

Answer 2

使用生成器http://www.colorzilla.com/gradient-editor 与色标非常接近。

background: linear-gradient(to bottom, #3056ff 0%,#3056ff 32%,#ff3033 33%,#ff282c 66%,#2989d8 67%,#2989d8 67%,#7db9e8 100%);