链接悬停关闭不透明度

Question

我有以下部分，其中包含具有高透明度的 png 背景图像。我这样做是因为我不知道如何使用不透明度功能。我什至未能使悬停链接颜色更改起作用。我猜css语法有问题。

无论如何，我真正想要的是在鼠标经过链接时关闭背景图像的不透明度。我该怎么做？

https://jsfiddle.net/h0b8e3t2/

<!-- Jobs -->
            <section id="jobs" class="wrapper style5">
                <div class="inner">
                <a href="#" target="new"><p><strong>Would You Like To Join Our Team?</strong></p></a>
                </div>
            </section>

.wrapper.style5 {
            background-color: #fcf3f7;
            background-image: url("/images/join.png");
            background-repeat: repeat-y;
            background-size: contain;
            border-style:solid none none none;
            border-width: 1,5px;
            border-color: #a4a4a4;
            text-align: center;
            font-size: 50px;
            line-height: 120%;
            color: #fff;


        }

            #jobs .wrapper.style5:hover {color:#fff}

Answer 1

你可以使用伪元素来解决这个问题，并使用正常的、不透明的 png

.wrapper.style5 {
  position: relative;
  border-style: solid none none none;
  border-width: 1, 5px;
  border-color: #a4a4a4;
  text-align: center;
  font-size: 50px;
  line-height: 120%;
  color: #fff;
}

.wrapper.style5 a::before,
.wrapper.style5 a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fcf3f7;
  z-index: -1;
}
.wrapper.style5 a::after {
  background: url(http://lorempixel.com/500/200/nature/1/);
  background-repeat: repeat-x;
  background-size: contain;
  opacity: 0.1;
}

.wrapper.style5 a:hover {
  color: #fff;
}
.wrapper.style5 a:hover::after {
  opacity: 1;
}

<!-- Jobs -->
<section id="jobs" class="wrapper style5">
  <div class="inner">
    <a href="https://docs.google.com/forms/d/e/1FAIpQLScerklD64H1kq9lz2UK58fJXhyWllJf-_ISCfFV4ew5A538VQ/viewform" target="new">
      <p><strong>Would You Like To Join Our Team?</strong></p>
    </a>
  </div>
</section>

---

基于使用 2:nd 示例更新的评论

.wrapper.style5 {
  position: relative;
  border-style: solid none none none;
  border-width: 1, 5px;
  border-color: #a4a4a4;
  text-align: center;
  font-size: 50px;
  line-height: 120%;
  color: #fff;
}

.wrapper.style5 a::before,
.wrapper.style5 a::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fcf3f7;
  z-index: -1;
}
.wrapper.style5 a::after {
  background: url(http://lorempixel.com/500/200/nature/1/);
  background-repeat: repeat-x;
  background-size: contain;
  opacity: 0.1;
}

.wrapper.style5 a:hover p {          /*  changed this  */
  background: #fff;                  /*  changed this  */
}
.wrapper.style5 a:hover::after {
  /* opacity: 1;                         removed this  */
}

<!-- Jobs -->
<section id="jobs" class="wrapper style5">
  <div class="inner">
    <a href="https://docs.google.com/forms/d/e/1FAIpQLScerklD64H1kq9lz2UK58fJXhyWllJf-_ISCfFV4ew5A538VQ/viewform" target="new">
      <p><strong>Would You Like To Join Our Team?</strong></p>
    </a>
  </div>
</section>