Question

我的网页上有一个图像网格，当我将鼠标悬停在图像上时，我想更改不透明颜色，所以我所做的是：

figure.snip0016:hover img {
  background: (0, 235, 125, 0.3);
}

但这没用。

当前，当您添加opacity属性时，它可以正常工作，但是当您将鼠标悬停在该属性上时，我希望它是橙色的。

这是完整的代码：

    @import url('https://fonts.googleapis.com/css?family=Karla&display=swap');

    figure.snip0016 {
      font-family: 'Karla', sans-serif;
      color: #fff;
      position: relative;
      overflow: hidden;
      max-width: 100%;
      width: 100%;
      background: #000000;
      text-align: left;
    }
    figure.snip0016 * {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }
    figure.snip0016 img {
      max-width: 100%;
      opacity: 1;
      width: 100%;
      -webkit-transition: opacity 0.35s;
      transition: opacity 0.35s;
    }
    figure.snip0016 figcaption {
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 60px 3em;
      width: 100%;
      height: 100%;
    }
    figure.snip0016 figcaption::before {
      position: absolute;
      top: 30px;
      right: 30px;
      bottom: 30px;
      left: 100%;
      border-left: 4px solid rgba(255, 255, 255, 0.8);
      content: '';
      opacity: 0;
      background-color: rgba(255, 255, 255, 0.5);
      -webkit-transition: all 0.5s;
      transition: all 0.5s;
      -webkit-transition-delay: 0.6s;
      transition-delay: 0.6s;
    }
    figure.snip0016 h2,
    figure.snip0016 p {
      margin: 0 0 5px;
      opacity: 0;
      -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
      transition: opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;
    }
    figure.snip0016 h2 {
      word-spacing: -0.15em;
      font-weight: 300;
      text-transform: ;
      -webkit-transform: translate3d(30%, 0%, 0);
      transform: translate3d(30%, 0%, 0);
      -webkit-transition-delay: 0.3s;
      transition-delay: 0.3s;
    }
    figure.snip0016 h2 span {
      font-weight: bold;
    }
    figure.snip0016 p {
      font-weight: 200;
      -webkit-transform: translate3d(0%, 30%, 0);
      transform: translate3d(0%, 30%, 0);
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
      line-height: 20px;
    }
    figure.snip0016 a {
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      position: absolute;
      color: #ffffff;
    }
    figure.snip0016:hover img {
      opacity: 0.2;
    }
    figure.snip0016:hover figcaption h2 {
      opacity: 1;
      -webkit-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0);
      -webkit-transition-delay: 0.4s;
      transition-delay: 0.4s;
    }
    figure.snip0016:hover figcaption p {
      opacity: 0.9;
      -webkit-transform: translate3d(0%, 0%, 0);
      transform: translate3d(0%, 0%, 0);
      -webkit-transition-delay: 0.6s;
      transition-delay: 0.6s;
    }
    figure.snip0016:hover figcaption::before {
      background: rgba(255, 255, 255, 0);
      left: 30px;
      opacity: 1;
      -webkit-transition-delay: 0s;
      transition-delay: 0s;
    }

    <div class="portfolio leadership popupTrigger" data-cat="leadership" data-popup-id="">
                      <div class="portfolio-wrapper">
                        <figure class="snip0016">
                          <img alt="" src="https://via.placeholder.com/180">
                          <figcaption class="hideForMobile hideForPhone hideForTablet">
                            <h2 style="font-size: 20px;">Chris<br>
                            <strong style="color: #EF4D26; font-size: 20px;">Saura</strong></h2>
                            <p style="font-size: 2vh">Team Manager</p>
                          </figcaption>
                        </figure>
                      </div>
                    </div>

Answer 1

“无法给图像提供背景色。”

您可以为图像添加一些填充以查看背景颜色，因为您正在[悬停]使用图像的背景颜色。还要添加一些填充，然后根据需要查看结果。

figure.snip0016:hover img {
      background: rgba(0, 235, 125, 0.3);
      padding:15px;
    }

或者您可以为图像的外部区域提供背景颜色：

figure.snip0016:hover{
      background: rgba(0, 235, 125, 0.3);
    }

希望您能理解

Answer 2

以它为例：

.snip0016 {
  height: 4rem;
  width: 4rem;
  border: 1 solid #000;
  background-color: tomato;
}
.snip0016:hover {
  background-color: rgba(0, 235, 125, 0.3);
}

<div class="snip0016">
</div>

更改悬停时的不透明颜色

2 个答案: