多重背景，而無需使用圖像

Question

是否有可能使用CSS多背景不使用圖像？

在我的情況下，我想爲前20個左右的像素，接着白色的梯度。

Answer 1

對於實際的梯度，則可以使用

background: #113; 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#113), color-stop(20px,#fff)); 
background: -webkit-linear-gradient(top, #113 0%,#fff 20px); 
background: linear-gradient(to bottom, #113 0%,#fff 20px); 
background: -moz-linear-gradient(top, #113 0%, #fff 20px); 
background: -ms-linear-gradient(top, #113 0%,#fff 20px); 
background: -o-linear-gradient(top, #113 0%,#fff 20px); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#113', endColorstr='#fff',GradientType=0); 

您也可以使用插圖box-shadow

background: #fff; 
box-shadow: inset 0 20px 20px -10px #113; 

這也會創建一個20px的黑色漸變，從t他頂部，進入白色。

我遺憾的是還不能上傳圖片，所以我就告訴你，漸變和框陰影DO略有不同。

Answer 2

的梯度發生器見ColorZilla - 這是百分比，但這個想法是正確的，我認爲

background: #1e5799; /* Old browsers */ 
background: -moz-linear-gradient(top, #1e5799 0%, #ffffff 25%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(25%,#ffffff)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #1e5799 0%,#ffffff 25%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #1e5799 0%,#ffffff 25%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #1e5799 0%,#ffffff 25%); /* IE10+ */ 
background: linear-gradient(to bottom, #1e5799 0%,#ffffff 25%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#ffffff',GradientType=0); /* IE6-9 */