HTML背景两种颜色[重复]

【问题标题】：HTML background two colors [duplicate]HTML背景两种颜色[重复]
【发布时间】：2017-09-08 12:20:15
【问题描述】：

我用这段代码把背景变成蓝色：

<!DOCTYPE html>
<html>
<body style="background-color:blue;">
</body>
</html>

哪个效果好，但我怎样才能让背景有两种不同的颜色？例如，50% 为蓝色，其余 50% 为黄色，例如水平分割...

【问题讨论】：

【解决方案1】：

使用 CSS 渐变：https://css-tricks.com/css3-gradients/

background: linear-gradient(blue, yellow);

或者如果你不想逐渐淡出你必须设置位置：

background: linear-gradient(to right, blue 0%, blue 50%, yellow 50%, yellow 100%);

【讨论】：

如果有人想要垂直分割，我觉得这有点棘手。我解决了这个问题 ==> .container { 背景：线性渐变（到底部，白色 0%，白色 25%，蓝色 25%，蓝色 100%）； } ==> html 使用 class='container' 并将您的内容放入其中，它将自动显示 25/75 垂直分割:)