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

Question

我正在创建一个带有按钮的叠加层。

按钮有黑色背景，叠加层也有黑色背景，不透明度为 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
     });
 });

Answer 1

按钮将从父级继承其不透明度，因此不透明度 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