身体背景与3种背景色 [英] Body background with 3 background colors

问题描述

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

Is it possible to have the body color as 3 different colors - I am creating a website (just for fun) based on the Scottish clubs and I was hoping to change the background color to represent the colors of the clubs ie - Rangers Red>White>Blue and Celtic Green>White>Gold

以下是3种颜色的示例-

Here is an example of the 3 color -

推荐答案

线性梯度方法

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

Linear Gradient Approach

You can make use of linear-gradient background images like in the below snippet. Making the color stop point of one color as the starting point of the next color would produce a block like effect instead of an actual gradient like effect.

所有浏览器的最新版本均支持线性渐变.如果要支持IE9及更低版本，则可能必须查看某些库(如CSS3 PIE)或使用其他方法，如box-shadow(插图)或一些其他(或伪)元素.

Linear gradients are supported in the recent versions of all browsers. If you want to support IE9 and lower then you may have to look at some libraries (like CSS3 PIE) or use a different approach like box-shadow (inset) or some extra (or pseudo) elements.

水平条纹:

要创建水平条纹，不需要指定角度(或边)，因为默认角度为0度(或to bottom，如 jedrzejchalubek 的答案中所述).

To create horizontal stripes, an angle (or sides) need not be specified because the default angle is 0 degree (or to bottom like mentioned in jedrzejchalubek's answer).

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表示渐变从屏幕的左侧到右侧).

To create vertical stripes, you need to either mention the angle (90deg) as the first parameter for the gradient (or specify to right meaning the gradient goes from left of the screen to the 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 和

You can make use of inset box-shadow along with viewport units also to produce the striped effect with just a single element. This would be supported by even IE9 because both box-shadow and viewport units are supported.

水平条纹:

要创建水平条纹，应将阴影的Y轴偏移量等分分配.这里我们使用33.33vh，66.66vh和99.99vh，因为只有3个颜色拆分.

To create horizontal stripes, the Y-axis offset of the box-shadows should be assigned in equal splits. Here we use 33.33vh, 66.66vh and 99.99vh because there is only a 3 color split.

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轴偏移.

This is very similar to the approach for creating horizontal stripes except for the fact that here we change the X-axis offset of the 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;
}

此方法具有最高的浏览器支持，因为它不使用视口单位，并且带有单个元素的伪元素-colon语法甚至受IE8支持.但是，这种方法的缺点是，如果您需要分割4种或更多种颜色，则将需要额外的元素.

This approach has the highest browser support because it doesn't use viewport units and pseudo-elements with a single-colon syntax are supported even by IE8. However, the drawback of this approach is that if you need a split of 4 or more colors then extra elements would be needed.

水平条纹:

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

To create horizontal stripes, the pseudo elements get 33.33% height of the body whereas the width is 100%. One pseudo element is positioned on the top and the other is positioned at the bottom.

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％.一个伪元素位于左侧，另一个伪元素位于右侧.

To create vertical stripes, the pseudo elements get 33.33% width of the body whereas the height is 100%. One pseudo element is positioned on the left and the other is positioned at the right.

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

这篇关于身体背景与3种背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！