具有3种背景颜色的正文背景

Question

有没有可能有3种不同的颜色身体颜色-我正在创建一个网站(只是为了好玩)的苏格兰俱乐部的基础上，我希望改变背景颜色来代表俱乐部的颜色ie -流浪者Red>White>Blue和凯尔特人Green>White>Gold

下面是3种颜色的一个例子：

​

Answer 1

线性梯度法

您可以使用linear-gradient背景图像，如下面的代码片段所示。将一种颜色的颜色停止点作为下一种颜色的起始点将产生类似块的效果，而不是实际的类似渐变的效果。

recent versions of all browsers支持线性渐变。如果你想支持IE9和更低的版本，那么你可能需要考虑一些库(比如CSS3 PIE)，或者使用不同的方法，比如box-shadow (插入)或者一些额外的(或伪)元素。

水平条纹：

要创建水平条纹，不需要指定角度(或边)，因为默认角度是0度(或如jedrzejchalubek's answer中提到的to bottom )。

​

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>

​

垂直条纹：

要创建垂直条纹，您需要将角度(90度)作为渐变的第一个参数(或指定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都被支持。

水平条纹：

要创建水平条纹，应将长方体阴影的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%);