将灰度滤镜应用于div

Question

尝试将灰度滤镜应用于主背景顶部的div。想知道这是否可以使用jQuery，CSS3或HTML5。我正在玩一些新的CSS3 / HTML5技术，但没有成功。

我无法将其保存为两张图片，因为背景需要拉伸全尺寸，因此在每个屏幕上都不会完全相同。

我正在制定早期草案，我只是想知道我是否应该抛弃这个想法。如果你指出我正确的方向，我可以弄清楚。

Answer 1

您可以使用CSS过滤器：

#mydiv{
    -webkit-filter: grayscale(1);
}

请注意，目前这适用于Chrome和Safari。

更多信息：http://caniuse.com/#feat=css-filters

Answer 2

你无法在CSS中应用“我身后的灰度”过滤器。

如果您不介意长宽比丢失的全屏（根据您的云图可能无关紧要），这是一种技巧。它将div放在背景的顶部，宽度的一半，使用background-size:200% 100%，使其大小与背景相同。然后我们应用CSS3灰度及其旧版本。然后在顶部使用伪元素使图像变暗。

目前已经测试并使用过：Chrome 25，Firefox，IE9（我假设为7,8）。

jsFiddle

.gray {
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg);
    width:50%;
    height:100%;
    background-size:200% 100%;
    position:relative;

    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: url(grayscale.svg); /* Firefox 4+ */
    filter: gray; /* IE 6-9 */
}
.gray:after {
    display:block;
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background-color:#000;
    opacity:.7;
}
body {
    margin:0;
    background:url(https://www.google.com.au/logos/2013/maria_sibylla_merians_366th_birthday_-1256008-hp.jpg);
    height:100%;
    background-size:100% 100%;
}
html {
    height:100%;
}

Answer 3

CSS使用rgba值提供“灰度”或透明背景变得简单。或者，您可以使用透明图像。

这里有一个例子http://jsfiddle.net/TtSUD/

在你的css中你将rgba值应用于背景：

#background_div{background-color:rgba(150,150,150,0.5);}

前三个值是红绿色和蓝色的数量，第四个值是不透明度的百分比。 1 = 100％不透明，0.5 = 50％不透明/透明。

希望这会有所帮助......

Answer 4

您可以通过将混合混合模式应用于顶部具有白色背景的div来实现：

.divOnTop {
     background: white;
     mix-blend-mode: saturation;
}

注意z索引。

有关混合混合模式的更多信息：

https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode

Answer 5

您可以使背景图像成为其背后图像的灰度版本。这应该工作。你只需要正确定位背景。

Answer 6

<块引用>

backdrop-filter

然而，在撰写本文时，它有多种支持 - Chrome、Edge、Safari、Opera，但令人惊讶的是 Firefox 没有。我想给主要浏览器一些时间。不过，我不希望 IE 支持它。

这是一个示例，其中第一行块是彩色的，然后第二行块也是彩色的，但是被一个使用背景过滤器的覆盖层覆盖。

.content, .overlay {
  position: absolute;
  width: 100%;
  height: 50%;
}

.content.second-content, .overlay {
  top: 50%;
}

.overlay {
  backdrop-filter: grayscale(1);
}

.content .color {
  display: inline-block;
  position: relative;
  height: 100%;
  width: 30%;
}

.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

<div class="content">
  <div class="color red"></div>
  <div class="color blue"></div>
  <div class="color yellow"></div>
</div>
<div class="content second-content">
  <div class="color red"></div>
  <div class="color blue"></div>
  <div class="color yellow"></div>
</div>
<div class="overlay">
</div>