与3种背景颜色的身体背景

Question

是否有可能让身体颜色为3种不同颜色 - 我正在创建一个基于苏格兰俱乐部的网站(只是为了好玩),我希望改变背景颜色来代表俱乐部的颜色,即 - 流浪者红>白>蓝色和凯尔特人绿色>白色>金色

这是一个3色的例子 -

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;
}

垂直条纹:

这与创建水平条纹的方法非常相似,除了这里我们改变X轴偏移的事实box-shadow.

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种或更多颜色的分割,则需要额外的元素.

水平条纹:

要创建水平条纹,伪元素的高度为33.33%,body而宽度为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;
}

垂直条纹:

要创建垂直条纹,伪元素的宽度为33.33%,body而高度为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%);