Question

是否可以将身体颜色设置为3种不同的颜色 - 我正在创建一个基于苏格兰俱乐部的网站（只是为了好玩），我希望改变背景颜色来代表俱乐部的颜色即 - 游骑兵红色＆gt;白色＆gt;蓝色和凯尔特绿色＆gt;白色＆gt;金

以下是3种颜色的示例 - enter image description here

Answer 1

线性梯度法

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

recent versions of all browsers支持线性渐变。如果你想支持IE9及更低版本，你可能需要查看一些库（如CSS3 PIE）或使用不同的方法，如box-shadow（插入）或一些额外的（或伪）元素。

水平条纹：

要创建水平条纹，无需指定角度（或多个边），因为默认角度为0度（或{strong> jedrzejchalubek 的答案中提到的to bottom）

＆＃13;

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

＆＃13;

<!-- to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

＆＃13;

垂直条纹：

要创建垂直条纹，您需要提及角度（90度）作为渐变的第一个参数（或指定to right，这意味着渐变从屏幕左侧到右侧）。

＆＃13;

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

＆＃13;

<!-- to avoid browser prefixes -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

＆＃13;

具有视口单元的框阴影方法

您也可以使用插入box-shadow以及视口单元来仅使用单个元素生成条纹效果。即使是IE9也支持这一点，因为支持box-shadow和viewport units。

水平条纹：

要创建水平条纹，应使用相等的分割指定框阴影的Y轴偏移。这里我们使用33.33vh，66.66vh和99.99vh，因为只有3个颜色分割。

＆＃13;

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

＆＃13;

垂直条纹：

这与创建水平条纹的方法非常相似，只是在这里我们更改了box-shadow的X轴偏移。

＆＃13;

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

＆＃13;

伪元素方法

此方法具有最高的浏览器支持，因为它不使用视口单元，即使IE8也支持pseudo-elements with a single-colon syntax。但是，这种方法的缺点是，如果你需要4种或更多颜色的分割，那么就需要额外的元素。

水平条纹：

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

＆＃13;

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

＆＃13;

垂直条纹：

要创建垂直条纹，伪元素的宽度为body的33.33％，而高度为100％。一个伪元素位于左侧，另一个伪元素位于右侧。

＆＃13;

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

＆＃13;

Answer 2

使用颜色停止的发生器http://www.colorzilla.com/gradient-editor非常接近。

<section class="content-wrapper main-content clear-fix">
    @{var orderedGroups = (from g in apiGroups orderby g.Key.ControllerName select g).ToArray();}
    @foreach (var group in orderedGroups) {
        @Html.DisplayFor(m => group, "ApiGroup")
    }
</section>

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

2 个答案:

线性梯度法

具有视口单元的框阴影方法

伪元素方法