我正在使用 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>
这是一个 fiddle : https://jsfiddle.net/f8e7n4f6/
我怎样才能在我的 div 后面有一个背景图片并保持我的 a-href 标签的完整性？而且，我有点好奇为什么它会阻止 a-href 被点击。
最佳答案
您正在为包含链接 <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>
我不认为你真的需要这个属性，你可以删除它，除非你正在执行我们不知道的特定样式..
更新 fiddle :https://jsfiddle.net/f8e7n4f6/2/
关于html - 背景图像遮挡 a-href，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34626834/