CSS 图片背景和覆盖屏蔽 link 和文本输入点击和焦点

Question

我有以下 html 和 css:

.icon-bar {
    width: 90px;
    z-index: 100;
    position: absolute;
    }

    #overlay {
    position: absolute;
    background-color: rgba(0,0,0,0.8);
    top:0;
    left: 0;
    bottom:0;
    height:100%;
    width:100%;
    z-index: -2;
    }

    #cover-photo {
    width:100%;height: 400px;    
    background:url('./assets/covers.jpg') no-repeat center center fixed;
    color:#fff;
    background-size:cover;
    text-align: center;
    z-index: -1;
    }

   <div class="row">
       <div class="col-md-12" id="cover-photo">
        <div id="overlay">

        </div>
        <div class="icon-bar col-md-push-10">
        <a class="active" href="#"><i class="fa fa-home"></i></a> 
        <a href="#"><i class="fa fa-search"></i></a> 
        <a href="#"><i class="fa fa-envelope"></i></a> 
        <a href="#"><i class="fa fa-globe"></i></a>
        <a href="#"><i class="fa fa-trash"></i></a> 
        </div>
       </div>
   </div>

现在出现了背景图像，以及预期的叠加 div，带有图标栏 class 的 div 也出现在前面，但是当我尝试点击里面的一个链接 div 它没有得到点击，我已经为这个 div 设置了 100 的 z-index 但是它是不可点击的，请帮我解决这个问题

Answer 1

I think it is because of anchor tag it is inline tag 
try to make it inline-block so it will work.

Check below link

https://jsfiddle.net/ashishbhalerao/Ldot4y96/4/

Thanks,

Ashish Bhalerao

Answer 2

您可以将 pointer-events: none 添加到叠加层 div。这将允许单击它后面的链接。

Answer 3

我想我明白你的意思了。您的代码中的错误是您将 <div id="overlay"></div>

定位在哪里

应该放在cover-photo

的结束标签之后

我也重新整理了你的代码并修改了一些。

我的建议是不要使用负数 z-index，而是使用从小到大的数字将一个元素的属性重叠到另一个元素。

#cover-photo {
    width: 100%;
    height: auto;
    background: url('./assets/covers.jpg') no-repeat center center fixed;
    color: #fff;
    background-size: cover;
    text-align: center;
    z-index: 5;
}

.icon-bar {
    width: 90px;
    z-index: 100;
    position: relative;
}

#overlay {
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
}

<div class="row">
    <div class="col-md-12" id="cover-photo">
        <div class="icon-bar col-md-push-10">
            <a class="active" href="#"><i class="fa fa-home"></i></a>
            <a href="#"><i class="fa fa-search"></i></a>
            <a href="#"><i class="fa fa-envelope"></i></a>
            <a href="#"><i class="fa fa-globe"></i></a>
            <a href="#"><i class="fa fa-trash"></i></a>
        </div>
    </div>
    <div id="overlay"></div>
</div>

CSS 图片背景和覆盖屏蔽 link 和文本输入点击和焦点

CSS image background and overlay blocking link and text input click and focus

html

css

background-image