笔者其实对于css一直是一知半解的状态。今天公司的需求需要让背景如图上所示。
通过度娘找到了一个强大的背景渐变手动设计的网站,在此分享
顺便献上自己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 */
最后是笔者使用该网站的一些经验,具体还是需要大家摸索。