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

Question

我想要一个不重复的背景图片。当图片结束时，它应该渐变为黑色。

这里有一个例子，仅缺少“渐变”。图片会突然结束并显示黑色，我想要这个过渡更加平滑。是否可行？

（从谷歌随机选取的图像）

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

在线演示：http://jsfiddle.net/sMc8a/

- user2015253

Answer 1

你可以尝试使用这段代码：http://jsfiddle.net/sMc8a/3/ HTML

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

- derek_duncan

---

你可以停止怨恨并提供一个更好的答案。 - derek_duncan

这不起作用，在Firefox 24中测试过。我尝试去掉“-webkit-”前缀，仍然不可用。 - user2015253

好的，我会提供修复，稍等一下。 - derek_duncan

没问题！感谢您选择它作为答案！ - derek_duncan

Answer 2

这在所有主流的浏览器中都可以工作，请试一下！

这里有个演示。

.background {
background-image: -webkit-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  -moz-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  -o-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  -ms-linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
background-image:  linear-gradient(rgba(0,0,0, 0) 0%,rgba(0,0,0, 1) 100%), url(http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png);
}

我添加了-ms-前缀...但实际上我不认为这是必须的。

正如我所说，这仅适用于主要浏览器... 因此，请添加一个备用方案，例如：

background: url('http://www.stadtteilschule-oejendorf.de/Unterricht/files/stacks_image_2936.png');

- Josh Crozier

---

所有主流浏览器的最新版本都支持标准语法。即使使用前缀，IE9也无法理解渐变，因此包含它也没有任何好处。 - cHao

我的意思是，主流浏览器不再需要供应商前缀。你可以删除其他四行代码，只使用标准的linear-gradient，只有那些仍在使用旧版本Firefox或Opera的3个人会注意到。（我从来不使用前缀，原因和我不使用条件注释或JavaScript非ECMAScript特性一样）。你只需要像你之前说的那样，加入一个单一的背景作为备选方案即可。 - cHao