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%。这可能吗？如何做到？

谢谢！

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