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

Question

我正在努力弄清楚为什么当我将背景图像添加到 div 容器的 tge 伪元素时这个锚标签 link 不起作用。

导致 link 中断的原因是 'contact-me' 伪元素的 'absolute' 定位。但如果我删除它，我就会失去形象。如何保留图像并使锚标记 link 起作用？有什么建议吗？

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,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: -o-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: -moz-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), 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;
}

我们将不胜感激任何帮助！

Answer 1

试试这个：

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

Answer 2

为什么要在联系我的 ID 下插入 background: background:？让你的 .btn class position: relative;

下面的代码

<!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,0,0) 30%), -webkit- linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: -o-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -o-linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: -moz-linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), -moz-linear-gradient(30deg, #cc0e74 60%, #790c5a 60%);
  background: linear-gradient(70deg, #e6739f 30%, rgba(0,0,0,0) 30%), 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>

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

Broken anchor tag caused by pseudo image background absolute positioning - how to fix?

css

css-position

anchor

pseudo-element

absolute