Body 具有 3 种背景颜色的背景

Question

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

这是 3 种颜色的示例 -

Answer 1

使用生成器 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%);

Answer 2

线性梯度法

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

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>

带视口单位的盒阴影方法

您可以使用 inset box-shadow 和视口单位也可以只用一个元素产生条纹效果。这甚至会被 IE9 支持，因为 box-shadow and 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;
}

伪元素方法

此方法具有最高的浏览器支持，因为它不使用视口单位，并且 pseudo-elements with a single-colon syntax 即使 IE8 也支持。但是，这种方法的缺点是，如果您需要拆分 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;
}

Body 具有 3 种背景颜色的背景

Body background with 3 background colors

html

css

linear-gradients

线性梯度法

带视口单位的盒阴影方法

伪元素方法