css图片怎么已黑色透明覆盖

在CSS中如何通过黑色透明覆盖图片？

img {
      position: relative;
}
img:before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
 }
    

这段CSS代码可以将图片的上层添加一块黑色透明的覆盖层。

首先，我们将图片的位置设为相对。然后，我们使用:before伪元素为图片添加一个覆盖层。伪元素的content属性为空，它的位置设为绝对，覆盖整个图片，并且背景为黑色，不透明度为0.5。z-index属性设置为1，以便使覆盖层在图片的上层。

通过这种方式，我们可以方便地为图片添加一个黑色透明的覆盖层，以获得更好的视觉效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！