javascript - 当我在背景图像 div 上应用叠加颜色时，内容会被禁用

Question

我有一个带有背景图片的 div，在 div 的中心，我有文本和一个按钮。

问题是，当我在背景图像上应用叠加颜色时，文本和按钮变得不可点击，就像它们被禁用一样。

我需要能够单击Read More 按钮并使内容可见和可选择。

jsFiddle https://jsfiddle.net/yzce0vLt/8/

HTML

<div class="col-md-12 dynamic-height">
  <div class="item dynamic-height">
            <div class="item-container dynamic-height content-center overlay-x dark" style="background: url('http://placehold.it/1920x1280') center center; background-size: cover;">
                <a href="#" class="btn btn-primary">Read More</a>
        </div>
</div>
</div>

CSS

.col-md-12, .item, .item-container {
  height: 600px;
}

/* Align Content */
.content-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Background Overlay */
.overlay-x {
    position: relative;
}
.overlay-x:before{
    position: absolute;
    content:" ";
    top:0;
    left:0;
    width:100%;
    height:100%;
    display: none;
    z-index:0;
}
.overlay-x:before{
    display: block;
}
.dark:before {
    background-color: rgba(0,0,0,0.5);
}
.light:before {
    background-color: rgba(255,255,255,0.5);
}

JS

$(document).ready(function() {
  // Dynamic Height
    $('.dynamic-height').css({'height':($(window).height())+'px'});
    $(window).resize(function(){
        $('.dynamic-height').css({'height':($(window).height())+'px'});
    });
});

Answer 1

将此添加到您的 CSS 中

 .btn {
  z-index: 100;
}

这会将按钮移到叠加层上。