html - 如何在图像上方创建一个图层(不透明)？

Question

<分区>

Answer 1

可以使用 :before 或 :after 伪元素创建此叠加层:

HTML:

<div class="image-holder">
  <img src="https://i.imgur.com/waDgcnc.jpg" />
</div>

必要的 CSS:

.image-holder {
  position: relative;
}
.image-holder:before {
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  content: '';
  width: 20%;
  bottom: 0;
  left: 0;
  top: 0;
}

.image-holder {
  position: relative;
  overflow: hidden;
}
.image-holder:before {
  background: rgba(255, 255, 255, 0.5);
  position: absolute;
  content: '';
  width: 20%;
  bottom: 0;
  left: 0;
  top: 0;
}
.image-holder img {
  display: block;
  height: auto;
  width: 100%;
}

<div class="image-holder">
  <img src="https://i.imgur.com/waDgcnc.jpg" />
</div>