使用CSS梯度來完成淡出

Question

所以使用此代碼

#grad1 { 
    height: 100px; 
    background: -webkit-linear-gradient(bottom, rgba(243,243,243,0), rgba(243,243,243,9)); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(top, rgba(243,243,243,0), rgba(243,243,243,9)); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(top, rgba(243,243,243,0), rgba(243,243,243,9)); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(to top, rgba(243,243,243,0), rgba(243,243,243,9)); /* Standard syntax (must be last) */ 
} 

我能夠完成一個css背景漸變淡出，但我只是想最底部褪色。

我有一個固定的標題，並希望它在底部淡出以平滑滾動。

任何想法？

Answer 1

RGBA中的A不能超過1 ...你是9

#grad { 
 
    height: 100px; 
 
    width:100%; 
 
    position:fixed; 
 
    background: linear-gradient(to top, rgba(243, 243, 243, 0), rgba(243, 243, 243, 1)); 
 
} 
 
body { 
 
    background: #0f0; 
 
    margin: 0; 
 
    height:750px; 
 
}

<div id="grad"></div>

如果你想梯度只是元素的底部之前停止，添加顏色停止。

#grad { 
 
    height: 100px; 
 
    width:100%; 
 
    position:fixed; 
 
    background: linear-gradient(to top, 
 
    rgba(243, 243, 243, 0), 
 
    rgba(243, 243, 243, 1) 20%, 
 
    rgba(243, 243, 243, 1)); 
 
    border-bottom:1px solid grey; /* for reference only */ 
 
} 
 
body { 
 
    background: #0f0; 
 
    margin: 0; 
 
    height:750px; 
 
}

<div id="grad"></div>