Question

例如，在下图中，对实际照片没有任何更改，仅添加了黑色覆盖。

我如何使用CSS做到这一点？要么我该如何使用其他任何软件？

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

Answer 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

Answer 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 */
}

如何使用CSS或任何其他方式将叠加层添加到图像

3 个答案: