jquery - CSS3中的多种垂直背景颜色

Question

问题:

尝试创建一个解决方案，使我能够拥有五种多种背景颜色来填充网页，而不管宽度如何。我已经设法用 5 个 div 标签做到了这一点，但我想知道是否可以完全使用 CSS3 做到这一点？

我想要的结果是:

我已经在 Stackoverflow 和网络上搜索过但没有任何结果，或者我根本不擅长搜索。

Answer 1

你可以使用 linear-gradients实现这一目标。

Example Here

html, body {
    height: 100%;
}
body {
    background-image: linear-gradient(90deg,
        #F6D6A8 20%,
        #F5BA55 20%, #F5BA55 40%,
        #F09741 40%, #F09741 60%,
        #327AB2 60%, #327AB2 80%,
        #3A94F6 80%);
}

只需添加供应商前缀以获得额外的浏览器支持

body {
    background: -moz-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%);
    background: -webkit-linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%);
    background: linear-gradient(90deg, #F6D6A8 20%, #F5BA55 20%, #F5BA55 40%, #F09741 40%, #F09741 60%, #327AB2 60%, #327AB2 80%, #3A94F6 80%);
}

可以找到浏览器支持 here .