javascript - 当覆盖层也具有不透明的黑色背景时，黑色不可见

我正在创建一个按钮覆盖。
按钮有黑色背景，覆盖层也有黑色背景，不透明度为0.6。
我的问题是我看不到按钮的黑色背景。
样本Demo在这里。请也找到截图。
HTML格式

<section id="s-explore">
    <div class="pagebreak"><span>The Lifestyle</span>  <i class="down">&lt;</i>
    </div>
    <div class="wrapper layout">
        <div class="col">
            <div class="media">
                <img id="d1" src="http://placekitten.com/300/300" />
                <div class="contenthover">

                    <p><a href="#" class="mybutton">Lorem ipsum</a>
                    </p>
                </div>
            </div>

        </div>

CSS

.contenthover{
    color:#fff;
}
.mybutton{
    padding:20px;
    color:#fff;
    background-color:#000;
    margin:10px;
}

滑动分页

 $(function () {
     $(' #d1').contenthover({
         overlay_width: 300,
         overlay_height: 150,
         effect: 'slide',
         slide_direction: 'bottom',
         overlay_x_position: 'center',
         overlay_y_position: 'bottom',
         overlay_background: '#000',
         overlay_opacity: 0.8
     });
 });

最佳答案

按钮将从父级继承其不透明度，因此1的不透明度实际上为0.8。
要解决此问题，请同时使背景不透明，并使用alpha值指定颜色：

/* overlay_opacity: 0.8  This be gone */
background-color: rgba(0, 0, 0, 0.8);

另请参见：A brief introduction to Opacity and RGBA

关于javascript - 当覆盖层也具有不透明的黑色背景时，黑色不可见，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25648293/