Question

我有一个紫色的页脚，但是还有一个页脚的叠加图像，我使用:: after选择器显示：

footer::after {
    content: "";
    background: url(/wp-content/themes/atheme/images/footermask.png);
    opacity: 0.1;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 100;
}

我在页脚中有通常的链接和社交项目，但是:: after mask会导致它们无法点击。作为一个解决方法，我绝对定位了元素并给了它们更高的z指数，但它导致其他问题与位置，我觉得它不是正确的方法。

这些元素怎么可能不是绝对定位的，但仍然在掩盖之后覆盖在上面？

此处示例：https://jsfiddle.net/g88ucp7k/

Answer 1

首先，从z-index: 100;

::after

将您的页脚内容包含在position:relative DIV
将z-index设置为该内容以覆盖...覆盖：）

footer {
  padding: 50px 0;
  width: 100%;
  background-color: purple;
  overflow: hidden;
}
footer .content{ /* ADDED */
  position:relative;
  z-index:1;
}
footer a{
  color: white;
}
footer::after {
  content: "";
  background: url(http://cdn1.bestpsdfreebies.com/wp-content/uploads/2014/05/shards_pattern.jpg);
  opacity: 0.4;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  /* z-index: 100; REMOVED */    
  height: 125px;
}

<footer>
    <div class="content">
        <a href="#">A link</a>
    </div>
</footer>

允许div内容面向＆＃39;使用::

1 个答案: