html - 我怎样才能有一个渐变背景，它后面有一个纯色延伸到页面底部？

Question

我尝试过各种不同的方法，但到目前为止都没有成功。

本质上，我想要的是一个沿着页面向下的渐变(我正在使用背景图像)，然后一旦图像结束，我想要一个背景颜色来接管(这样页面就不会变成白色).

我试过使用不同的 div 标签和类似的东西来分层等等，但到目前为止还没有成功。背景颜色覆盖图像，或者颜色没有延伸到页面底部。

Answer 1

你可以只为你的 body 使用背景:

body {
   /* Your gradient image */
   background-image: url(my_gradient.png);
   /* Color below the background image */
   background-color: #C0FFEE;
   /* Only repeat from left to right */
   background-repeat: repeat-x;
}

或者使用后台速记

body {
   background:#C0FFEE url('my_gradient.png') repeat-x left top;
}