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%
);

我正在尝试将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;
}

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

1 个答案: