Question

我有一个透明的div，我需要在透明度的顶部放一个链接，但是纯色或链接似乎都不起作用，我一直在尝试不同的东西，比如将链接放在div中，甚至使图像可爱，只是在顶部添加文字，但我不能使它工作。任何想法？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

这是一个z索引问题。伪元素位于链接的顶部，因此链接不可点击。将z-index: -1添加到.skewed:after

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我想发布我的答案有点晚了，但我的解决方案略有不同，所以这是一个替代方案。是的，您的问题与z-index有关。在我看来，你的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>

在透明div上添加链接与背景图像

2 个答案: