html5 css3 реализовать фоновый рисунок

Question

Я должен реализовать этот шаблон для фонового веб-сайта. Кто может помочь мне реализовать образец? Я не знаю, как это должно быть развито.

я понял градиент с этим CSS3 код:

background: rgb(152,152,152); /* Old browsers */ 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzk4OTg5OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZmZmZmZmIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); 
background: -moz-linear-gradient(left, rgba(152,152,152,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(152,152,152,1)), color-stop(100%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* IE10+ */ 
background: linear-gradient(to right, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#989898', endColorstr='#ffffff',GradientType=1); /* IE6-8 */ 

Answer 1

Как прокомментировал, он используется в качестве запасного варианта для некоторых старых браузеров, например, I.E.6

background: rgb(152,152,152); /* Old browsers */ 

Включить встроенный фоновое изображение (используя кодирование base64 вместо URL)

background: url(data:image/svg+xml;base64,PD94bWw...); 

Для -xx-линейного градиента линии, мы называем его конкретного производителя свойства.

background: -moz-linear-gradient(left, rgba(152,152,152,1) 0%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(152,152,152,1)), color-stop(100%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(left, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* IE10+ */ 
background: linear-gradient(to right, rgba(152,152,152,1) 0%,rgba(255,255,255,1) 100%,rgba(255,255,255,1) 100%); /* W3C */ 

Они не обязательно должны быть стандартными правилами W3C. Целью существования реквизитов, специфичных для вендора, является предоставление браузерам возможности добавлять свои собственные реквизиты CSS для предоставления дополнительных возможностей, а не того, что предлагалось разработчикам.

Последняя строка используется I.E. который поддерживает свойство "filter".

Короче говоря, линии ниже первой линии только делают ту же работу, но они просто предназначены для использования различных браузеров. Это гарантирует, что элемент с применимыми правилами будет выглядеть одинаково во всех основных браузерах.