Css 在主体背景中添加多种颜色？

假设我添加身体背景色，如下所示：

body{
   background-color: blue;
}

如果我想要一半身体是蓝色，另一半是红色，那该怎么办。

你可以这样做

background: linear-gradient(to bottom, blue 50%, red 50%);

要获得完整的浏览器支持，您还需要包括以下内容

background: -moz-linear-gradient(top, blue 50%, red 50%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,blue), color-stop(50%,red));
background: -webkit-linear-gradient(top, blue 50%,red 50%);
background: -o-linear-gradient(top, blue 50%,red 50%);
background: -ms-linear-gradient(top, blue 50%,red 50%);

---

这取决于，如果你想要一个淡入淡出的效果，那么

background: -webkit-linear-gradient(left, red , blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red , blue); /* Standard syntax */

应该有用。否则，如果您想要半红半蓝，则：

background: linear-gradient(to right, blue 50%, red 50%);

也应该有效。确保添加css前几行中显示的所有兼容性。第一个参数允许您指定方向（“向右”表示颜色将从左向右变化，因此先是50%蓝色，然后是50%红色）

希望它有助于=D

使用