使用 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>