如何在css或任何其他方式中为图像添加叠加层[重复]答案

【问题标题】：How can i add an overlay to an image in css or any other way [duplicate]如何在css或任何其他方式中为图像添加叠加层[重复]
【发布时间】：2018-12-04 14:18:15
【问题描述】：

例如在下图中，没有对实际照片进行任何更改，只是添加了黑色叠加层。

我如何使用 css 做到这一点？要么使用其他软件怎么做？

【问题讨论】：

还有过滤器属性：bennettfeely.com/filters（我想它不是覆盖）它适用于大多数较新的浏览器，但在 IE 中有一个“旧”过滤器的工作方式不同，并且因为人们倾向于避免冲突和命名混乱 - 但如果您不需要支持 IE 也不错。

标签： css html image

【解决方案1】：

这是一种简单的方法，使用一个伪元素 (::before)，将半透明背景（黑色，不透明度为 50%，由 rgba 定义）覆盖在图像上方。

.dark-img {
  position: relative;
  width: 300px;
}

.dark-img img {
  display: block;
  width: 100%;
}

.dark-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: rgba(0, 0, 0, .5);
}

<div class="dark-img">
  <img src="https://i.imgur.com/qLRD0OC.jpg" />
</div>

【讨论】：

【解决方案2】：

快速简单

<html>
<head>
  <style>
    .your-div {width: 500px; height: auto; background-color: #000;}
    .your-div img {width: 500px; height: auto; opacity: 0.3}
  </style>
</head>
<body>
    <h2>Hello</h2>
<div class="your-div">
  <img src="http://img1.juimg.com/140915/330518-14091516335670.jpg"></div>
</body>
</html>

codepen：https://codepen.io/anon/pen/XYPWXx

【讨论】：

【解决方案3】：

<div id="overlay"></div>
CSS:
#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0; 
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}

【讨论】：