html – 如何在4中分割背景颜色

前端之家收集整理的这篇文章主要介绍了html – 如何在4中分割背景颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有这个div:
<div data-role="page" id="menupage"></div>

这代表了页面的主体.而且我想用4种颜色制作它的背景.我知道怎么做到2:

#menupage {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,#FFF 0%,#FFF 50%,#008DD2 50%,#008DD2 100%
  );
}

我想要这样的东西:

PS:如果你喜欢这些颜色:

orange: #F26522;
green:  #BBC274;

有人可以帮忙吗?谢谢!

解决方法

使用CSS3,您可以申请 multiple backgrounds.
body,html {
  margin: 0;
  padding: 0;
}

#menupage{
  width: 100%;
  height: 100vh;
  background: linear-gradient(to right,#008DD2 100%),linear-gradient(to right,#F2651C 0%,#F2651C 50%,#BCC375 50%,#BCC375 100%);
  background-size: 100% 50%;
  background-position: center top,center bottom;
  background-repeat: no-repeat;
}
<div data-role="page" id="menupage"></div>

猜你在找的HTML相关文章