链接悬停关闭不透明

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更新注释：第二样品

.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>