linear-gradient背景显示异常：出现红蓝相间条纹，请求技术协助

你的问题出在body元素的高度和背景重复机制上：

• 默认情况下，body的高度由内部内容撑开，你页面里只有一个空div，所以body高度极小；
• CSS中background-repeat的默认值是repeat，当背景尺寸小于元素容器时，会自动重复平铺，最终形成了红蓝相间的横向条纹。

修复方案 #

优先推荐让body占满整个视口高度，同时清除默认边距避免白边：

body {
    margin: 0;
    min-height: 100vh;
    background-image: linear-gradient(to top right, red, blue);
}

如果只是临时避免重复，也可以添加background-repeat: no-repeat，但这种方法会导致页面下方出现空白（因为body高度不足），所以不推荐：

body {
    background-image: linear-gradient(to top right, red, blue);
    background-repeat: no-repeat;
}

另外补充：如果你实际想要的是左上到右下的渐变（而非当前的左下到右上），需要把方向改为to bottom right：

body {
    margin: 0;
    min-height: 100vh;
    background-image: linear-gradient(to bottom right, red, blue);
}

内容的提问来源于stack exchange，提问作者Ethan