Html 如何使用CSS为图像提供无光泽（非玻璃）外观？

我想用非玻璃显示器显示图像。与下面的一个类似

我使用的图像，因为它是。我想用哑光饰面来展示这一点

正常图像：

哑光饰面：

---

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

在一个容器里，我确实放了一张对比度降低的图像/亮度/饱和度加上一点模糊（所有这四种效果都是由CSS

过滤器产生的）。图像本来可以作为容器背景，但我想应用这些过滤器，所以它被分离了

在它之后，有一个透明的彩色层覆盖整个区域。字母代表页面的内容，可以是任何内容

更新：多个筛选器必须全部在一行中，就像上次更新一样：


正文{
宽度：100%；
高度：100vh；
边际：0px；
字体系列：佐治亚，衬线；
}
#容器{
宽度：100%；
身高：100%；
位置：相对位置；
背景色：海军蓝；
溢出：隐藏；
}
#thepic{
宽度：100vw；
高度：100vh；
对象匹配：覆盖；
-webkit过滤器：亮度（90%）对比度（90%）模糊（2px）灰度（10%）；
滤镜：亮度（90%）对比度（90%）模糊（2px）灰度（10%）；
}
#色层{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景色：海军蓝；
不透明度：0.3；
}
#内容{
位置：绝对位置；
最高：50%；
-webkit转换：translateY（-50%）；
-ms转换：translateY（-50%）；
转化：translateY（-50%）；
左：0；
右：0；
保证金：自动；
文本对齐：居中；
}
h1{
显示：内联块；
颜色：白色；
文本阴影：1px 2px 2px#000；
字号：4em；
字号：100；
字母间距：2px；
文本对齐：居中；
垂直对齐：中间对齐；
}
#书信{
垂直对齐：中间对齐；
}

書面
@freestock.tk-这也是我的想法

下面是另一种使用较少标记的方法：


img{
最大宽度：100%；
高度：自动；
}
.集装箱{
位置：相对位置；
z指数：-1；
}
.货柜：在{
内容：“；
位置：绝对位置；
z指数：1；
排名：0；
底部：0；
左：0；
右：0；
背景：rgba（0,0,0,0.5）；
}

原始图像
透明覆盖
我不知道你所说的“非玻璃显示”是什么意思。你是说照片上的哑光表面还是光泽表面？@Taylor714-是的。我认为这是哑光饰面。与上述内容类似，这与css有什么关系，您希望更改现有图像的外观还是其他什么？请多点clear@aw04-是的。我想更改现有图像的外观，以磨砂完成在css@aw04-我用图片编辑了这个问题。这真的很有帮助。当我与
id
一起使用时，它可以正常工作。我试图将css与
类
一起使用，而不是与
id
一起使用。是否可以与类一起使用？id和类的唯一区别在于，类可以应用于多个对象，而id是唯一的。在css中，当引用类时使用.name，当引用id时使用#name。我使用了.img matte和。css中的颜色层，用于图像标记。但它不起作用。当我使用更多的div时，不知何故它在其他元素之间引入了空间。ps2：你说你的css有。我不确定这是否只是评论上的一个输入错误，但正确的是；