img悬停时的不透明度和颜色变化答案

【问题标题】：Opacity and color change on img hoverimg悬停时的不透明度和颜色变化
【发布时间】：2016-11-19 22:28:24
【问题描述】：

当我将鼠标悬停在一张图片上时，它具有渐进式不透明效果。当我将鼠标悬停在图像上时，我喜欢过渡效果，但不喜欢图像的颜色。当我将鼠标悬停在图像上时，我无法改变图像的颜色。 background-color: #50b948; 什么都不做。我究竟做错了什么？下面是我的 CSS 和 HTML。

#about img {
  margin: 0 auto;
}

.imgAbout img {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.imgAbout img:hover {
  background: #50b948;
  opacity: 0.6;
}

HTML

<div class="row">
    <div class="col-md-4">
      <a href="bios/teamBioNeil.html">
        <div class="imgAbout">
          <img src="img/team/neil580x410.jpg" class="img-responsive" alt="Bio">
        </div>
      </a>
      <h1>NAME</h1>
      <h3>Chairman &amp; CEO<br> 
                  Senior Wealth Advisor</h3>
    </div>
    <div class="col-md-4">
      <a href="bios/teamBioJeff.html">
         <div class="imgAbout">
            <img src="img/team/neil580x410.jpg" class="img-responsive" alt="Bio">
        </div>
      </a>
      <h1>NAME</h1>
      <h3>President<br>
      Senior Wealth Advisor</h3>
    </div>
    <div class="col-md-4">
      <a href="bios/teamBioKim.html">
         <div class="imgAbout">
          <img src="img/team/kim580x410.jpg" class="img-responsive" alt="Bio">
        </div>
      </a>
      <h1>NAME</h1>
      <h3>Chief Operating Officer</h3>
    </div>
  </div> <!-- end row -->

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

您想要应用包含图像的 div 的背景颜色 - 而不是图像本身 - 然后当您降低图像的不透明度时，背景将显示出来。

.imgAbout{
  background: #50b948;
}

.imgAbout img {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}

.imgAbout img:hover {
  opacity: 0.6;
}

顺便说一句 - 你有太多的 H1 - 从语义上讲，每页（或部分）应该只有 1 个 H1，然后其他的是 H2，例如：页面 H1 可以是“员工”，然后下面命名的每个都是 H2 或 3 .

【讨论】：