Черный цвет не отображается, когда наложение также имеет черный фон с непрозрачностью

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

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.

Чтобы это исправить, сделать фон непрозрачным, а также, и указать цвет с альфа-значением вместо:

/* 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

только изменения требуются

1. Удалить overlay_opacity: 0.8
2. Изменить предыдущую строку overlay_background: 'rgba(0,0,0,0.8)'

См http://jsfiddle.net/MbLNN/129

основе GolezTrol answer