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。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

如果希望渐变在元素底部之前停止，请添加色标。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

使用css渐变来完成淡出

1 个答案: