如何在不使用滤镜的情况下使图像变暗？ [复制]

Posted 2023-05-08

【中文标题】如何在不使用滤镜的情况下使图像变暗？ [复制]

【英文标题】：How do you darken an image without using filter? [duplicate]

【发布时间】：2020-05-15 17:12:40

【问题描述】：

我正在寻找一种在不使用 filter 属性的情况下使图像变暗的方法，因为 filter 属性根本不兼容所有 IE，即使使用供应商前缀也是如此。我需要制作一个至少与 IE 11 兼容的网站。有什么绝妙的方法可以在不使用 CSS 中的 filter 属性的情况下使图像变暗吗？

【问题讨论】：

这能回答你的问题吗？ How to make in CSS an overlay over an image?

【参考方案1】：

尝试用div 重叠图像，并给它一些opacity 和颜色black。

【参考方案2】：

添加一个覆盖 div 会有所帮助。 `

<div class="container">
  <div class="overlay"></div>
  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ5LKVYZUWJ1Uj-VymZDykSDIjBfmQfov7NPdAPdmvjWhtHPxHFSw&s" />
</div>

<style>
.container 
  height: 300px;
  width: 300px;
  position: relative;


img 
  height: 300px;
  width: 300px;
  object-fit: cover;


.overlay 
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.7)

</style>

` https://jsfiddle.net/devatquarxps/fq94ov7h/7/