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

Firefox：背景图片不可见

Safari：opacity工作，过滤器不

IE最新版本：opacity工作，过滤器不

任何人都可以启发我吗？

感谢。

Answer 1

未加前缀应该在底部！此外，如果您的页面上没有内容，您应该给身体最小高度：

＆＃13;

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

＆＃13;

A Tiger!

＆＃13;

另外，你不需要moz，ms或o前缀，因为它们是否支持它没有前缀或根本不支持它。

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

背景图像的不透明度和灰度滤镜。使其黑白透明

1 个答案: