Question

当我将鼠标悬停在图像上时，我的图像具有轻松的不透明效果。当我将鼠标悬停在图像上时，我喜欢过渡效果，但不喜欢图像的颜色。当我将鼠标悬停在图像上时，我无法想象改变图像的颜色。 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 -->

Answer 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个

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

1 个答案: