问题:多个垂直背景颜色CSS3
试图创建一个解决办法,让我有五个多种背景颜色,无论宽度,填补了网页。我设法用5个div标签做到这一点,但我想知道是否有可能完全使用CSS3做到这一点?
我想结果是:
我已搜查和#2网络没有任何结果,或者我只是在寻找非常糟糕。
问题:多个垂直背景颜色CSS3
试图创建一个解决办法,让我有五个多种背景颜色,无论宽度,填补了网页。我设法用5个div标签做到这一点,但我想知道是否有可能完全使用CSS3做到这一点?
我想结果是:
我已搜查和#2网络没有任何结果,或者我只是在寻找非常糟糕。
您可以使用linear-gradients来实现此目的。
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。
好的,你的比我的好多了。投票! – 2014-10-04 20:20:33
似乎没有'html,body {height:100%; '也是。 [小提琴](http://jsfiddle.net/s3vxknbd/5/) – webinista 2014-10-04 20:23:51
@ webinista是的,你说得对,它在大多数情况下都能正常工作,但是看看当你在''margin:0'身体'元素。 [(实施例)](http://jsfiddle.net/qb04zz1o/)。添加'html,body {height:100%; }'将覆盖大部分用例,[见](http://jsfiddle.net/56phkasu/) – 2014-10-04 20:27:40
看看这个我做了一个这个。 http://jsfiddle.net/753gugpt/
我用linear-gradient CSS3属性是这样的:
#container {
width: 100%;
/*or 900px for example */
overflow-x: hidden;
}
#exampleB {
width: 32700px;
height: 285px;
background-color: #a8e9ff;
filter: progid: DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#a8e9ff, endColorstr=#052afc);
background-image: -moz-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
background-image: linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
background-image: -webkit-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
background-image: -o-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
background-image: -ms-linear-gradient(left, #a8e9ff 0%, #052afc 0%, #485e69 12%, #ff8d00 1%);
background-image: -webkit-gradient(linear, left bottom, right bottom, color-stop(0%, #a8e9ff), color-stop(0%, #052afc), color-stop(12%, #485e69), color-stop(1%, #ff8d00));
}
<div id="container">
<div id="exampleB"></div>
</div>
也许这会为你工作:)
正如我所说@Josh Crozier的解决方案比我的要好得多。但它仍然以一种方式工作! :) 谢谢! – 2014-10-06 08:32:40
http://www.colorzilla.com/gradient-editor/ – loveNoHate 2014-10-04 19:53:06
请参阅http://stackoverflow.com/questions/6457406/can-i-apply-multiple-background-colors-with-css3 – dotfreelancer 2014-10-04 20:01:38
绝对使用渐变。 – webinista 2014-10-04 20:07:29