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

Question

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

目前我有这个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%
);

我希望用相同的东西(content height) - 500px替换90% (content height) - 500px 。 这可能吗？它是如何完成的？

谢谢！

Answer 1

只需使用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; }