CSS linear-gradient: 如何设置从底部开始计数的固定色标位置

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%。这可能吗？它是如何实现的？

谢谢！

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

CSS linear-gradient: 如何设置从底部开始计数的固定色标位置

CSS linear-gradient: How to set fixed color-stop location counting from bottom

css

linear-gradients