背景图像的不透明度和灰度滤波.让它变成黑白透明的

Question

我想让我的背景图像半透明，灰度/黑白。我通过组合来自Stackoverflow的两个不同线程的代码来编写以下代码)

body {
    position: relative;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
body::after {
  content: "";
  background: url('<?php echo $background[0]; ?>');
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;  
    filter: grayscale(100%); /* Current draft standard */
    -webkit-filter: grayscale(100%); /* New WebKit */
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); /* Not yet supported in Gecko, Opera or IE */ 
    filter: url(resources.svg#desaturate); /* Gecko */
    filter: gray; /* IE */
    -webkit-filter: grayscale(1); /* Old WebKit */  
}

这是如何工作的:

Chrome: working

Firefox:背景图像不可见

Safari:不透明度工作，过滤器不工作

IE最新版本:不透明度工作，过滤器不能

有人能给我开导一下吗?

谢谢。

Answer 1

不带前缀的应该在底部!此外，如果你的页面上没有内容，你应该给body设置min-height:

    html{
      height: 100%;
    }
    body {
        position: relative;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      min-height: 100%;
    }
    body::after {
      content: "";
      background: url('http://jsequeiros.com/sites/default/files/imagen-cachorro-comprimir.jpg') no-repeat center center;
      background-size:cover;
      opacity: 0.5;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: -1;  
      -webkit-filter: grayscale(1); /* Old WebKit */
      filter: grayscale(1);
    }

A Tiger!

同样，你不需要moz, ms或o前缀，因为它们要么支持无前缀，要么根本不支持。

Codepen: http://codepen.io/vandervals/pen/VLmbpx