Question

我正在使用Bootstrap并尝试将div作为许多其他div后面的背景图像，但是我注意到当我将背景图像放在父div上时，所有a-href个元素变得无法点击。这是复制它的代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
  <div class="container-fluid">
    <div class="col-md-12" style="background: url('http://images.alphacoders.com/225/225771.jpg'); z-index:-100;">
    <div class="row">
      <div class="col-md-8 col-md-offset-2" style="color:white;">
        <a href="www.google.ca">Why can't you click me?</a>
      </div>
    </div>
    </div>
  </div>
</div>

这是一个小提琴： https://jsfiddle.net/f8e7n4f6/

如何在div后面加上背景图片并保持a-href标签的完整性？而且，我有点好奇为什么它会阻止a-href被点击。

Answer 1

您正在为包含链接<a>标记的div设置负z-index，该标记将其推向后方并阻止其被点击：

这部分在下面的代码中：

<div class="col-md-12" style="background: url('http://images.alphacoders.com/225/225771.jpg'); z-index:-100; ">

完整的HTML：

<body>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
  <div class="container-fluid">
    <div class="col-md-12" style="background: url('http://images.alphacoders.com/225/225771.jpg'); z-index:-100; ">
    <div class="row">
      <div class="col-md-8 col-md-offset-2" style="color:white;">
        <a href="www.google.ca">Why can't you click me?</a>
      </div>
    </div>
    </div>
  </div>
</div>

我认为你真的不需要这个属性，你可以删除它，除非你正在执行我们不知道的特定样式..

更新小提琴：https://jsfiddle.net/f8e7n4f6/2/

Answer 2

尝试将图像的z-index更改为1

背景图像阻碍了a-href

2 个答案: