Question

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

按钮具有黑色背景，并且覆盖图也具有黑色背景，不透明度为0.6。

我的问题是我无法看到按钮的黑色背景。

示例Demo就在这里。请找到截图。 enter image description here

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

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

Answer 2

使用颜色rgba代替十六进制和不透明度。

不透明度附加所有元素不透明度，但rgba仅附加有效元素。

rgba（0,0,0,0.5）;这是黑色，0.5不透明度。

Answer 3

删除0.6的不透明度，因为它也适用于此案例按钮中的子项并将其替换为

背景：RGBA（0,0,0，0.6）;

Answer 4

只需要进行更改

删除overlay_opacity: 0.8
将上一行更改为overlay_background: 'rgba(0,0,0,0.8)'

请参阅http://jsfiddle.net/MbLNN/129

基于GolezTrol answer

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

4 个答案: