6

快速示例

尝试对主背景上方的 div 应用灰度过滤器。想知道这对于 jQuery、CSS3 或 HTML5 是否可行。我正在使用一些新的 CSS3/HTML5 技术，但没有成功。

我不能将它保存为两个图像，因为背景需要拉伸全尺寸，所以它不会在每个屏幕上都完全相同。

我正在做一个早期的草稿，我只是想知道我是否应该放弃这个想法。如果您指出我正确的方向，我可以弄清楚。

4

7 回答 7

13

您可以使用 CSS 过滤器：

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

请记住，这目前适用于 Chrome 和 Safari。

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

于 2013-04-02T06:49:12.953 回答
6

您不能在 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%;
}
于 2013-04-02T06:50:09.637 回答
4

您可以通过对顶部的 div 应用 mix-blend-mode 来做到这一点，背景为白色：

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

注意 z-index。

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

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

于 2018-06-26T14:08:56.360 回答
2

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

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

在您的 CSS 中，您将 rgba 值应用于背景，如下所示：

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

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

希望这可以帮助...

于 2013-04-02T06:48:53.993 回答
0

背景过滤器

然而，在撰写本文时，它已经混合了各种支持——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>

于 2021-04-26T19:56:05.293 回答
0

2022：您现在可以通过对浏览器的广泛支持（IE 除外）对所有内容进行灰度化。您也不必使用webkit前缀：

filter: grayscale(1);
于 2022-02-25T21:03:28.010 回答
-1

您可以将背景图像设为其背后图像的灰度版本。那应该行得通。你只需要正确定位背景。

于 2013-04-02T18:12:07.597 回答