Div с наложением и кнопкой

Question

я обязательно С наложения непрозрачности 0.5 на

<div class="panel panel-default"> 

      </div> 

DIV имеют CSS

.panel.panel-default { 
    border-top-color: #F5F5F5; 
    border-top-width: 1px; 
} 
.panel { 
    float: left; 
    width: 100%; 
    border: 0px; 
    border-top: 2px solid #E5E5E5; 
    margin-bottom: 20px; 
    position: relative; 
    -moz-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2); 
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2); 
    box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2); 
} 
.panel-default { 
    border-color: #ddd; 
} 
.panel { 
    margin-bottom: 20px; 
    background-color: #fff; 
    border: 1px solid transparent; 
    /* border-radius: 4px; */ 
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.05); 
    box-shadow: 0 1px 1px rgba(0,0,0,.05); 
} 
html * { 
    outline: none !important; 
} 
* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
user agent stylesheetdiv { 
    display: block; 
} 

Теперь я хотел бы DIV с непрозрачностью выше 0,5, а центр этот непрозрачный div я ввожу 4 кнопки в центре по вертикали и по горизонтали

поэтому мне нужно вставить новый div в непрозрачность и еще один div для четырех кнопок центрального,

<div class="panel panel-default"> 
<div style="overlay"><div style="bottons">1</div><div style="bottons">2</div><div style="bottons">3</div><div style="bottons">4</div></div> 
</div> 

http://jsfiddle.net/qu62mvkk/10/

http://jsfiddle.net/qu62mvkk/13/

Answer 1

Не используйте непрозрачность, потому что все дочерние элементы будут наследовать это, используйте цвет фона RGBA вместо этого. например:

цвет фона: RGBA (255,255,255,0.5),

это сделает только выбранный DIV с непрозрачностью.