当叠加层也具有不透明度的黑色背景时,黑色不可见

Question

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

按钮具有黑色背景,覆盖层也具有黑色背景,不透明度为0.6.

我的问题是我看不到按钮的黑色背景.

示例演示在这里.请找到截图.

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;
}

jQuery的

 $(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);

另请参阅:Opacity和RGBA的简要介绍