使用 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 背景渐变淡出，但我只是想让最底部淡出。

我有一个固定的 header 并希望它在底部淡出以便更流畅地滚动。

有什么想法吗？

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>

使用 css 渐变来实现淡出

using css gradient to accomplish a fade out

css

gradient