在背景圖片上添加透明div上的鏈接

Question

我有一個透明度爲div的div，我需要在透明度上放置一個鏈接，但純色或鏈接似乎都不起作用，我一直在嘗試不同的事情，比如把鏈接放在一個div裏，甚至使圖像變得可愛，只是在頂部添加文本，但是我不能讓它工作。 有什麼想法？

.skewed { 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    color: white; 
 
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
 
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
 
    width: 100%; 
 
    max-width: 400px; 
 
    min-width: 300px; 
 
    height: 350px; 
 
    min-height: 300px; 
 
    float: left; 
 
    margin-top: 5%; 
 
} 
 

 

 
.skewed:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: inherit; 
 
    height: inherit; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
} 
 

 
.skewed a { 
 
    padding: 50%; 
 
    color: white; 
 
    font-size: 5em; 
 
}

<div class="row"> 
 
      <div class="col-sm-4 skewed" style="background-image: url(https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg);"> 
 
      <a href="" class="link">link</a> 
 
      </div> 
 
      
 
</div>

Answer 1

這是一個z-index的問題。僞元素位於鏈接的頂部，因此鏈接不可點擊。添加z-index: -1到.skewed:after

.skewed { 
 
    background-size: contain; 
 
    background-repeat: no-repeat; 
 
    color: white; 
 
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
 
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
 
    width: 100%; 
 
    max-width: 400px; 
 
    min-width: 300px; 
 
    height: 350px; 
 
    min-height: 300px; 
 
    float: left; 
 
    margin-top: 5%; 
 
} 
 

 

 
.skewed:after { 
 
    content: ''; 
 
    position: absolute; 
 
    width: inherit; 
 
    height: inherit; 
 
    top: 0; 
 
    left: 0; 
 
    background: rgba(0, 0, 0, 0.5); 
 
    z-index: -1; 
 
} 
 

 
.skewed a { 
 
    padding: 50%; 
 
    color: white; 
 
    font-size: 5em; 
 
}

<div class="row"> 
 
      <div class="col-sm-4 skewed" style="background-image: url(https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg);"> 
 
      <a href="" class="link">link</a> 
 
      </div> 
 
      
 
</div>

Answer 2

我想我是有點晚了，讓我的答案貼了，但我的解決方案略有不同，所以這裏是一個替代的修補程序。是的，你的問題與z-index有關。在我看來，你的div是不必要的，所以我刪除了它在anchor標籤下的屬性。我還添加了350px的行高來居中文本。很明顯，只有當你的文本被包含到一行時纔有效，所以如果你覺得沒有幫助，你可以刪除那個屬性。

a{ 
    font-size: 5em; 
    text-align: center; 
    line-height: 350px; 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-image: url(https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg); 
    background-color: black; 
    color: white; 
    -webkit-clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); 
    width: 100%; 
    max-width: 400px; 
    min-width: 300px; 
    height: 350px; 
    min-height: 300px; 
    float: left; 
    margin-top: 5%; 
} 
a:after { 
    content: ''; 
    position: absolute; 
    width: inherit; 
    height: inherit; 
    top: 0; 
    left: 0; 
    background-color: rgba(0, 0, 0, 0.5); 
    z-index: -1; 
} 

這裏的HTML：

<div class="row"> 
    <a href="" class="link">link</a>    
</div>