首页 文章

CSS线性渐变：如何设置从底部开始计数的固定颜色停止位置

提问于
浏览 次
3

我正在寻找为我的内容区域创建渐变背景 . 渐变只是纯白色，从顶部的零不透明度渐渐消失，再次在底部消失回零不透明度 . 由于内容高度变化很大，相对的颜色停止位置并不好 .

目前我有这个CSS：

background: linear-gradient(
  to bottom, 
  rgba(255,255,255,0) 0%,
  rgba(255,255,255,1) 500px,
  rgba(255,255,255,1) 90%,
  rgba(255,255,255,0) 100%
);

我希望将 90% 替换为等于 (content height) - 500px 的东西 . 这可能吗？它是如何完成的？

谢谢！

css css3 linear-gradients

1 回答

  • 2

    只需使用 calc ：

    body {
 min-height:1500px;
 margin:0;
 background: linear-gradient(
  to bottom, 
  rgba(255,255,255,0) 0%,
  rgba(255,255,255,1) 500px,
  rgba(255,255,255,1) calc(100% - 500px),
  rgba(255,255,255,0) 100%
);
}
html {
 background:pink;
}

    或考虑多个背景，你可以调整 background-size / background-position

    body {
  min-height: 1500px;
  margin: 0;
  background: 
  /* Top part will take 500px*/
  linear-gradient(to bottom, transparent, #fff) top/100% 500px,
  /*Bottom part will take 500px*/
  linear-gradient(to top, transparent, #fff) bottom/100% 500px,
  /*Middle part will take (100% - 2*500px) */
  linear-gradient(#fff,#fff) center/100% calc(100% - 1000px);
  background-repeat:no-repeat;
}

html {
  background: pink;
}
    回复于

相关问题