如何在图像上添加叠加颜色？ [复制]答案

【问题标题】：How to add overlay color on image? [duplicate]如何在图像上添加叠加颜色？ [复制]
【发布时间】：2020-05-07 08:07:56
【问题描述】：

如何在我的图像上添加叠加层？

我使用了:after 属性，但它不起作用。我在它起作用之前使用它，但这次它不起作用。我想我犯了一些错误，但我找不到。谁能给我一个解决方案？

Github 链接：https://iamtheasad.github.io/Bino-l-p/

Codepen 链接：https://codepen.io/aasaadzaman5/pen/PowxrVp

 .team_list img {
   border-radius: 50%;
   border: 4px solid #e74c3c;
   z-index: 1;
   position: relative;
   -webkit-box-shadow: 0px 1px 6px 1px #000;
   box-shadow: 0px 1px 6px 1px #000;
}

.team_list img:after {
   position: absolute;
   content: '';
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   background-color: red;
}

HTML：

<div class="team_list">
     <span>
        <img src="images/team/team_1.jpg" alt="Team Person" />
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <img src="images/team/team_2.jpg" alt="Team Person" />
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <img src="images/team/team_3.jpg" alt="Team Person" />
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <img src="images/team/team_4.jpg" alt="Team Person" />
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <img src="images/team/team_5.jpg" alt="Team Person" />
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
  </div>

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

这样试试

HTML

<div class="team_list">
     <span>
     <div class="overly">
     <img src="images/team/team_1.jpg" alt="Team Person" />
     </div>

        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <div class="overly">
     <img src="images/team/team_2.jpg" alt="Team Person" />
     </div>
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
       <div class="overly">
     <img src="images/team/team_3.jpg" alt="Team Person" />
     </div>
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <div class="overly">
     <img src="images/team/team_4.jpg" alt="Team Person" />
     </div>
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
     <span>
        <div class="overly">
     <img src="images/team/team_5.jpg" alt="Team Person" />
     </div>
        <h4>Kazi Erfan</h4>
        <p>UI/UX Designer</p>
     </span>
  </div>

css

.team_list > span{
  float:left;
  text-align:center;
  padding:10px;
}
.team_list .overly{
  position:relative;
  border-radius: 50%;
   border: 4px solid #e74c3c;
   z-index: 1;
   position: relative;
   -webkit-box-shadow: 0px 1px 6px 1px #000;
   box-shadow: 0px 1px 6px 1px #000;
   width:200px;
   height:200px;
   transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
}
.team_list .overly img{
  max-width:100%;
   border-radius: 50%;
}
.team_list .overly:after{
  content:"";
  position:absolute;
  left:0;
  top:0;
  background-color:#ff00009e;
  width:100%;
  height:100%;
  border-radius: 50%;
   transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
opacity:0;
}
.team_list .overly:hover:after{
 opacity:1;
}

【讨论】：