伪元素给图片加蒙层

 

 

 

.shadow::before{
  content: "哈哈哈，我是遮罩";
  position: absolute;
  top:0;
  left:0;
  width: 100%;
  height:100%;
  box-sizing: border-box;
  padding: 20px;
  background-color: rgba(0,0,0,.7);
  color:#fff;
  text-align: center;
}

 

 

笨方法 ：在图片同级加一个div。设置 position：ablolute。 width  height  与图片大小一致

            <div>
              <div class="shadow"></div>
              <img src="./img/pic1.png" />
            </div>     

 .shadow{
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    background: #333333;
  }