如何添加多個線性漸變到CSS背景？如果

Question

我正在嘗試完成下面的左側窗口小部件框，並且您可以看到，有一個對角線性漸變，以及從上到下的光澤。我在CSS中創建的是在右邊，而我試圖完成的是在左邊。有沒有一種方法可以只使用一個背景屬性來完成此操作？或者我需要圍繞整個div與另一個div，所以我可以覆蓋一個半透明的漸變呢？由於

與代碼更新：

.drk-grad { 
    background: linear-gradient(to bottom, #d2d2d2 7%, #b1b1b1 100%); 
    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background-clip: padding-box; 
    -webkit-box-shadow: 0px 1px 3px 1px #969494; 
    box-shadow: 0px 1px 3px 1px #969494; 
    border-top: 1px solid rgba(255, 255, 255, 0.7); 
    border-left: 1px solid rgba(255, 255, 255, 0.3); 
} 

SOLUTION：

background: repeating-linear-gradient(rgba(255,255,255,.5) -1%, rgba(107, 107, 107, 0.1), repeating-linear-gradient(135deg, #b6b6b6, #B6B6B6 10px, #b2b2b2 10px, #b2b2b2 20px); 

Answer 1

一般來說，你可以添加多個背景，以逗號分隔。列出的第一個出現在頂部。

http://css-tricks.com/stacking-order-of-multiple-backgrounds/

http://lea.verou.me/css3patterns/

這是一個基本的輪廓。爲您正好想要的效果的數字播放：

DEMO - http://jsbin.com/tamav/1

.drk-grad { 

    background: 

    linear-gradient(to top, transparent, #b1b1b1 100%), 

    gray repeating-linear-gradient(45deg, transparent, transparent 35px, 

    rgba(255, 255, 255, 0.5) 35px, rgba(255, 255, 255, 0.5) 70px); 

    -webkit-border-radius: 10px; 
    border-radius: 10px; 
    background-clip: padding-box; 
    -webkit-box-shadow: 0px 1px 3px 1px #969494; 
    box-shadow: 0px 1px 3px 1px #969494; 
    border-top: 1px solid rgba(255, 255, 255, 0.7); 
    border-left: 1px solid rgba(255, 255, 255, 0.3); 

}