链接悬停关闭不透明度

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>

​