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/

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

Answer 2

这适用于所有主要浏览器，测试一下！

Demo here.

.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');

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

2 个答案: