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

Question

I'm looking to create a gradient background for my content area. The gradient would simply be solid white, fading in from zero opacity at the top and again fading back to zero opacity at the bottom. As the content height is highly variable, relative color-stop locations don't fare well.

At the moment I have this 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%
);

I'm looking to replace the 90% with something that would equal (content height) - 500px . Is this possible and how is it done?

Thanks!

Answer 1

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

Or consider multiple background where you can adjust 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; }