在带有背景图像的透明 div 上添加链接

Question

我有一个带有透明度的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 索引问题。伪元素位于链接的顶部，因此链接不可单击。将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 索引有关。在我看来，你的div 是不必要的，所以我删除了它在锚标签下的属性。我还添加了 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>