如何使用CSS为图像添加哑光（非玻璃）外观？

Question

我想用非玻璃显示器显示图像。与以下类似，

我正在使用图像。我想用哑光表示。

正常图片：

哑光表面处理：

我无法在网上找到它。可能是我没有使用正确的搜索关键字。有人可以帮我这个吗？

Answer 1

在容器内部，我确实放置了降低对比度 / 亮度 / 饱和度以及一点模糊（CSS LatencyTest.ContextConfiguration所有这四种效果）。该图像可以作为容器背景放置，但我想应用这些过滤器，使其分离。

之后，有一个着色层，透明度覆盖整个区域。这封信代表了网页的内容，可以是任何内容。

更新：多个过滤器必须全部连续，就像在最新的更新中一样：

filter

body {
  width: 100%;
  height: 100vh;
  margin: 0px;
  font-family: Georgia, serif;
}

#container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: navy;
  overflow: hidden;
}

#thepic {  
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  -webkit-filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);
  filter: brightness(90%) contrast(90%) blur(2px) grayscale(10%);  
}

#color_layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  
  height: 100%;
  background-color: navy;
  opacity: 0.3;
}

#content {  
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
}

h1 {
  display: inline-block;
  color: white;
  text-shadow: 1px 2px 2px #000;
  font-size: 4em;
  font-weight: 100;
  letter-spacing: 2px;
  text-align: center;
  vertical-align: middle;
}

#letter {
  vertical-align: middle;  
}

Answer 2

@ freestock.tk - 这也是我想到的想法。

以其他方式使用较少的标记来实现它：

＆＃13;

＆＃13;

img {
  max-width: 100%;
  height: auto;
}
.container {
  position: relative;
  z-index: -1;
}
.container:before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
}

＆＃13;

<div>
  <h1>Original Image</h1>
  <img src="http://i.imgur.com/WjbwTUH.jpg">
</div>

<div class="container" id="content">
  <h1> With Transparent Overlay </h1>
  <img src="http://i.imgur.com/WjbwTUH.jpg">
</div>

＆＃13;

＆＃13;

＆＃13;

在此示例中，我将图像放在相对定位的容器中。 z-index为-1，因此它将位于下一层之后。

然后我使用了绝对定位的伪元素，因此它会在容器的整个宽度上伸展并覆盖图像。正z-index将其设置在第一层之上。我没有设置不透明度，而是使用rgba值作为背景颜色。前三个数字或红色，绿色和蓝色值照常，但最后一个数字是0到1之间的小数，用于设置不透明度级别。我把它做得比你想要的要暗一点，所以你可以看到差异。您也可以选择不同的颜色来适合您的图像。

供参考：http://nicolasgallagher.com/css-background-image-hacks/