作者:Ycandy | 来源:互联网 | 2023-06-02 16:20
Problem:问题:Tryingtocreateasolutionthatwouldallowmetohavefivemultiplebackgroundcolor
Problem:
问题:
Trying to create a solution that would allow me to have five multiple background colors that fill out a webpage regardless of width. I have managed to do this with 5 div tags but I wonder if it's possible to do this completely using CSS3?
尝试创建一个解决方案,允许我有五种多种背景颜色,无论宽度如何都可以填充网页。我已设法用5个div标签做到这一点,但我想知道是否可以使用CSS3完全做到这一点?
The outcome I would like is:
我想要的结果是:
I have searched Stackoverflow and the web without any results, or I am simply very bad at searching.
我搜索了Stackoverflow和网页没有任何结果,或者我只是非常糟糕的搜索。
2 个解决方案
11
You could use linear-gradients to achieve this.
您可以使用线性渐变来实现此目的。
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%);
}
Just add vendor prefixes for additional browser support
只需添加供应商前缀即可获得其他浏览器支持
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%);
}
Browser support can be found here.
浏览器支持可以在这里找到。