如何使用 CSS 将背景图像淡化为黑色？

Question

我想要一个不重复的背景图像。当图像结束时，它应该柔和地淡化为黑色。

这是我的意思的一个例子，它只是错过了“软衰落”。图像突然结束并且有黑色，我希望这种过渡更平滑。那可能吗？

（图片随机取自谷歌）

body {
    background:url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png) #000 no-repeat;
}

现场演示：http : //jsfiddle.net/sMc8a/

Answer 1

您可以尝试使用此代码。http://jsfiddle.net/sMc8a/3/

超文本标记语言

<div class="example">
    Hello
</div>

CSS

body {
  background: black;
}
.example {
  width: 300px;
  height: 300px;
  background-image: -webkit-linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    -webkit-linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);

  background-image: -moz-linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    -moz-linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);

  background-image: -o-linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    -o-linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);

  background-image: linear-gradient(top, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    linear-gradient(left, 
      rgba(0,0,0,0.9) 0%, 
      rgba(0,0,0,0) 20%,
      rgba(0,0,0,0) 80%,
      rgba(0,0,0,0.9) 100%
    ),
    url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
}