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

【问题标题】：CSS linear-gradient: How to set fixed color-stop location counting from bottomCSS线性渐变：如何设置从底部计数的固定颜色停止位置
【发布时间】：2018-07-25 11:29:18
【问题描述】：

我希望为我的内容区域创建渐变背景。渐变将只是纯白色，从顶部的零不透明度逐渐淡入，然后再次淡入底部的零不透明度。由于内容高度变化很大，因此相对色标位置不太好。

目前我有这个 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 的内容。这可能吗？如何做到的？

谢谢！

【问题讨论】：

那么 500px 是干什么用的？
如果(content height)是动态的，使用JQuery。
@Znaneswar 你是认真的还是单纯的玩笑？

标签： css linear-gradients

【解决方案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;
}

【讨论】：