css 图片上浅下深

CSS的背景图片是网页设计中常用的一种方式，如果要使背景图片呈现出浅上深下的效果，可以通过CSS中的线性渐变属性linear-gradient来实现。

  .background {
    background-image: linear-gradient(to bottom,rgba(0,0.7),1)),url(bg-image.jpg);
    height: 300px;
    width: 100%;
  }

上述代码中背景图片是由两层组成：一层是线性渐变，另一层为实际的背景图片。通过设置线性渐变的颜色，从透明到不透明，可以形成深色向浅色过渡的视觉效果。透过上层的渐变层，背景图片的颜色就呈现出了浅上深下的效果。

如果需要调整渐变的颜色过渡或者位置，可以更改first参数和second参数。

  .background {
    background-image: linear-gradient(first-color,second-color),url(bg-image.jpg);
    height: 300px;
    width: 100%;
  }

如下的渐变颜色将使图像呈现从蓝到绿到黄的颜色过渡效果：

  .background {
    background-image: linear-gradient(to bottom,blue 0%,green 50%,yellow 100%),url(bg-image.jpg);
    height: 300px;
    width: 100%;
  }

这样，我们就可以通过线性渐变属性linear-gradient，实现背景图片的浅上深下效果，让网页设计更加动感、丰富。