伪图像背景绝对定位导致锚标签损坏 - 如何修复？

如何解决伪图像背景绝对定位导致锚标签损坏 - 如何修复？

当我向 div 容器的 tge pesudo 元素添加背景图像时，我正在努力弄清楚为什么这个锚标记链接不起作用。

导致链接断开的原因是“contact-me”伪元素的“绝对”定位。但是如果我删除它，我就会丢失图像。如何保留图像并使锚标记链接起作用？有什么建议吗？

HTML：

<div id="contact-me">

<h2>Contact</h2>

<h3><a class="btn" href = "mailto:email@gmail.com">email@gmail.com</a></h3>

</div>

CSS：


#contact-me {
  background:      background: -webkit-linear-gradient(70deg,#e6739f 30%,rgba(0,0) 30%),-webkit- linear-gradient(30deg,#cc0e74 60%,#790c5a 60%);
  background: -o-linear-gradient(70deg,-o-linear-gradient(30deg,#790c5a 60%);
  background: -moz-linear-gradient(70deg,-moz-linear-gradient(30deg,#790c5a 60%);
  background: linear-gradient(70deg,linear-gradient(30deg,#cc0e74     60%,#790c5a 60%);
  color: #f5f5f5;
  position: relative;
  margin-top: 100px;
  padding-top: 5px;
  padding-bottom: 60px;

}

#contact-me:after {
       content: "";
       background: url("http://www.transparenttextures.com/patterns/cubes.png");
       position: absolute;
       top: 0px;
       right: 0px;
       bottom: 0px;
       left: 0px;
       opacity: 0.9;
       width: 100%;
       height: 100%;
}

.btn {
  cursor: pointer;
  color: #fffafa;
  z-index: 5;
}

任何帮助都会得到极大的赞赏！

解决方法

试试这个：

.btn {
  cursor: pointer;
  color: #fffafa;
  z-index: 5;
  position:relative
}

你为什么在联系我 ID 下插入 background: background:？使您的 .btn 类位置：相对；

下面的代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Document</title>
  <style>
    

    #contact-me {
  background: -webkit-linear-gradient(70deg,#e6739f 30%,rgba(0,0) 30%),-webkit- linear-gradient(30deg,#cc0e74 60%,#790c5a 60%);
  background: -o-linear-gradient(70deg,-o-linear-gradient(30deg,#790c5a 60%);
  background: -moz-linear-gradient(70deg,-moz-linear-gradient(30deg,#790c5a 60%);
  background: linear-gradient(70deg,linear-gradient(30deg,#cc0e74     60%,#790c5a 60%);
  color: #f5f5f5;
  position: relative;
  margin-top: 100px;
  padding-top: 5px;
  padding-bottom: 60px;

}

#contact-me:after {
       content: "";
       background: url("http://www.transparenttextures.com/patterns/cubes.png");
       position: absolute;
       top: 0px;
       right: 0px;
       bottom: 0px;
       left: 0px;
       opacity: 0.9;
       width: 100%;
       height: 100%;
}

.btn {
  position: relative;
  cursor: pointer;
  color: #fffafa;
  z-index: 5;
}
  </style>
</head>
<body>
  <div id="contact-me">

    <h2>Contact</h2>
    
    <h3><a class="btn" href = "mailto:email@gmail.com">email@gmail.com</a></h3>
    
    </div>
</body>
</html>