背景图像的不透明度和灰度过滤器。使它黑白透明

Question

我想使我的背景图像为半透明和灰度/黑白。我通过组合来自 Whosebug 的两个不同线程的代码制作了以下代码）

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：工作

Firefox：背景图片不可见

Safari：不透明度有效，过滤器无效

IE 最新版本：不透明度有效，过滤器无效

谁能教教我？

谢谢。

Answer 1

无前缀的应该在最下面！另外，如果你的页面上没有内容，你应该给正文指定最小高度：

    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 前缀，因为它们支持无前缀或根本不支持。

代码笔：http://codepen.io/vandervals/pen/VLmbpx

背景图像的不透明度和灰度过滤器。使它黑白透明

Opacity and grayscale filter of background image. Making it black and white and transparent

css

opacity

grayscale