css实现背景backgroup渐变效果,兼容各个浏览器(直接生成)

笔者其实对于css一直是一知半解的状态。今天公司的需求需要让背景如图上所示。

通过度娘找到了一个强大的背景渐变手动设计的网站，在此分享

 gradient-editor(国外开发者) 

顺便献上自己css代码。或许有些用处

background: rgb(248,181,0); /* Old browsers */
            background: -moz-linear-gradient(45deg, rgba(248,181,0,1) 4%, rgba(252,205,77,1) 13%, rgba(252,205,77,1) 13%, rgba(249,249,247,1) 36%, rgba(249,249,247,1) 36%, rgba(249,249,247,1) 36%, rgba(249,249,247,1) 36%, rgba(249,249,247,1) 37%, rgba(249,249,247,1) 62%, rgba(252,205,77,1) 85%, rgba(252,205,77,1) 85%, rgba(248,181,0,1) 100%, rgba(248,181,0,1) 100%, rgba(251,223,147,1) 100%, rgba(248,181,0,1) 100%); /* FF3.6-15 */
            background: -webkit-linear-gradient(45deg, rgba(248,181,0,1) 4%,rgba(252,205,77,1) 13%,rgba(252,205,77,1) 13%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 37%,rgba(249,249,247,1) 62%,rgba(252,205,77,1) 85%,rgba(252,205,77,1) 85%,rgba(248,181,0,1) 100%,rgba(248,181,0,1) 100%,rgba(251,223,147,1) 100%,rgba(248,181,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
            background: linear-gradient(45deg, rgba(248,181,0,1) 4%,rgba(252,205,77,1) 13%,rgba(252,205,77,1) 13%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 36%,rgba(249,249,247,1) 37%,rgba(249,249,247,1) 62%,rgba(252,205,77,1) 85%,rgba(252,205,77,1) 85%,rgba(248,181,0,1) 100%,rgba(248,181,0,1) 100%,rgba(251,223,147,1) 100%,rgba(248,181,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8b500', endColorstr='#f8b500',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
            

最后是笔者使用该网站的一些经验，具体还是需要大家摸索。