你如何在CSS中創建漸變背景？

Question

有沒有什麼辦法可以用CSS創建漸變背景？

您可以看到我想達到的示例on this website。

Answer 1

使用這個在你的CSS：

background-image: -o-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%); 
background-image: -moz-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%); 
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.24, rgb(254,133,107)), color-stop(0.62, rgb(35,171,17))); 
background-image: -webkit-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%); 
background-image: -ms-linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%); 
/* This last line is all you need for modern browsers */ 
background-image: linear-gradient(bottom, rgb(254,133,107) 24%, rgb(35,171,17) 62%); 

參見：

• The specification
• The MDN documentation

Answer 2

添加兩個div標籤，給背景顏色鏈接此

<div style="background-color:black"> </div> 
<div style="background: -moz-linear-gradient(top, #55aaee, #003366);"> </div> 

這是不準確的語法，這是一個想法，怎麼可能u做

Answer 3

試試這個網站。

• http://www.colorzilla.com/gradient-editor/

但也有本網站上的圖像和其他的東西，所以如果你要複製的風格，看看他們是怎麼做到的，並嘗試實現它自己！還有它有一個網站相當NEET背景圖案的，它與梯度組合看起來絕對富麗：

：

• http://subtlepatterns.com/

爲此將顯示在每一個瀏覽器梯度的簡單示例代碼

background: rgb(243,226,199); 
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YzZTJjNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2MxOWU2NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iI2I2OGQ0YyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlOWQ0YjMiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); 
background: -moz-linear-gradient(left, rgba(243,226,199,1) 0%, rgba(193,158,103,1) 50%, rgba(182,141,76,1) 51%, rgba(233,212,179,1) 100%); 
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(243,226,199,1)), color-stop(50%,rgba(193,158,103,1)), color-stop(51%,rgba(182,141,76,1)), color-stop(100%,rgba(233,212,179,1))); 
background: -webkit-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%); 
background: -o-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%); 
background: -ms-linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%); 
background: linear-gradient(left, rgba(243,226,199,1) 0%,rgba(193,158,103,1) 50%,rgba(182,141,76,1) 51%,rgba(233,212,179,1) 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3e2c7', endColorstr='#e9d4b3',GradientType=1); 

Answer 4

簡單易做。 Try this link

/* IE10 Consumer Preview */ 
background-image: -ms-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%); 

/* Mozilla Firefox */ 
background-image: -moz-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%); 

/* Opera */ 
background-image: -o-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%); 

/* Webkit (Safari/Chrome 10) */ 
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FCFEFF), color-stop(1, #AF00EF)); 

/* Webkit (Chrome 11+) */ 
background-image: -webkit-linear-gradient(top, #FCFEFF 0%, #AF00EF 100%); 

/* W3C Markup, IE10 Release Preview */ 
background-image: linear-gradient(to bottom, #FCFEFF 0%, #AF00EF 100%); 

Answer 5

.bckgrnd { 
    background-color:Green; 
    background-image: -webkit-gradient(linear, 0% 0%,0% 0%, from(Green), to(Yellow)); 
    background-image: -webkit-linear-gradient(top, Green, Yellow); 
    background-image: -moz-linear-gradient(top, Green, Yellow); 
    background-image: -ms-linear-gradient(top, Green, Yellow); 
    background-image: -o-linear-gradient(top, Green, Yellow); 
} 

Answer 6

使用background-image與linear-gradient()或radial-gradient()。

.linear-gradient { 
 
    background-image: linear-gradient(to bottom, #000077, #65A5FF); 
 
} 
 
.radial-gradient { 
 
    background-image: radial-gradient(#000077, #65A5FF); 
 
} 
 
div { 
 
    width: 100%; 
 
    height: 200px; 
 
}

<h1>Linear gradient</h1> 
 
<div class="linear-gradient"></div> 
 
<h1>Radial gradient</h1> 
 
<div class="radial-gradient"></div>

據caniuse.com，CSS漸變被所有主流瀏覽器的支持。如果您必須支持IE < = 9，請使用純色或圖像背景回退。如果您必須支持Android Browser < = 4.3，請使用前綴版本（-webkit-linear-gradient）。