身体背景有三种背景颜色

Question

有没有可能将网页主体颜色设置为3种不同的颜色？我正在创建一个以苏格兰俱乐部为基础的网站（只是为了好玩），希望更改背景颜色以代表俱乐部的颜色，例如：流浪者队红、白、蓝和凯尔特人队绿、白、金。

这里有一个三种颜色的示例：

- Derek Kennedy

---

为什么不呢？一个绝对定位的 div，高度和宽度均为 100%，内部包含三个 div，宽度均为 100%，高度为 33.34%。 - nicael

一些俱乐部有两种颜色，因此使用三个div会破坏布局。 - Derek Kennedy

显然的答案是肯定的。您是指不使用额外元素，仅在body上使用CSS的情况吗？ - light

是的 - 只使用 CSS，不添加或删除 div。 - Derek Kennedy

你说的三种不同颜色是指什么？垂直条纹？重复？还是只是三个“相等的块”？是垂直的还是水平的？ - light

Answer 1

线性渐变方法

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

线性渐变在所有浏览器的最近版本中得到支持。如果您想支持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>

垂直条纹：

要创建垂直条纹，您需要将角度（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和视口单位都得到支持。

水平条纹：

要创建水平条纹，应将盒子阴影的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也支持使用单冒号语法的伪元素。然而，这种方法的缺点是如果需要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;
}

- Harry

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%);

- Jędrzej Chałubek

---

+1 我认为我们实际上在同一时间发布了非常相似的答案（没有任何指责，只是陈述事实）。关于渐变本身，您可以将一个颜色的停止点作为下一个颜色的起始点（而不是作为32％的停止和33％的起点），以避免即使是小的渐变也会出现颜色变化 :) - Harry

我猜你是指颜色停止而不是关键帧。 - Paulie_D