如何使用CSS将图像制作成哑光效果（非玻璃质感）？

Question

如何使用CSS将图像制作成哑光效果（非玻璃质感）？

htmlcssimage

3

我想展示一张非玻璃质感的图片，类似于以下这张图片：

我使用原图，希望能够呈现出哑光效果。

普通图片：

哑光效果：

我无法在网上找到它。也许是我没有使用正确的搜索关键词。有人能帮我吗？

- Dany

我不确定你所说的“非玻璃显示”是什么意思。你是在谈论照片上的哑光涂层和光泽涂层之间的区别吗？ - Taylor714

这与CSS有什么关系？您想要更改现有图像的外观还是其他什么？请更明确一些。 - aw04

@aw04 - 是的。我想在CSS中将现有图像的外观更改为哑光效果。 - Dany

明白了。您能否编辑您的问题并添加实际的玻璃显示图像？我不确定如何完成，但是有了图像，也许有人可以帮忙。 - aw04

1

@aw04 - 我已经使用图片编辑了这个问题 - Dany

显示剩余7条评论

2个回答

2

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

这里有一种使用较少标记的方法：

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

<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>

在这个例子中，我将图像放在一个相对定位的容器内。z-index设置为-1，所以它将在下一个层次的背后。

然后我使用了一个伪元素，它是绝对定位的，所以它将延伸到整个容器的宽度并覆盖图像。正值的z-index将其置于第一层的顶部。而不是设置不透明度，我使用rgba值作为背景颜色。前三个数字是红色、绿色和蓝色的值，最后一个数字是0到1之间的小数，用于设置不透明度级别。我让它比你想要的稍微暗一些，这样你就可以看到差异。您也可以选择不同的颜色来适应您的图像。

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

- Taylor714

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- L777 · Accepted Answer

在容器中，我放置了一张使用CSS滤镜制作的降低对比度 / 亮度 / 饱和度以及一点点模糊的图像。这张图片可以作为容器的背景，但是我想应用这些滤镜，所以它被分开了。

之后，有一个带透明度的彩色层覆盖了整个区域。字母代表页面的内容，可以是任何东西。 更新: 多个滤镜必须全部连续，就像在这个最新更新中一样：

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

<div id=container>
<img id=thepic src="http://i.imgur.com/s9J4MnI.jpg">
<div id=color_layer></div>
<span id=content><img id=letter src="http://i.imgur.com/CB1vUqy.png" alt=img><h1>&nbsp;書面</h1></span>
</div>