Thủ thuật với thuộc tính CSS3 Opancity

Ở cả hình 1 và hình 2 đều sử dụng 1 thẻ div có thuộc tính opacity: 0.5; nhưng nếu để ý sẽ thấy chữ trong hình 1 bị mờ đi theo thẻ cha, còn hình 2 thì chữ vẫn giữ nguyên.
HTML
Hình 1:
<div class="container"> <div class="bar">Hello world 1</div> </div>
.container {
/* thuộc tính quan trọng
******************************************
position: relative; /* cho thẻ .bar hiển thị trong nó */
******************************************/
background-image: url(galaxy.jpg);
width: 500px;
background: #000;
height: 500px;
width: 80%;
margin: 0 auto;
height: 500px;
}

.bar {
/* thuộc tính quan trọng
******************************************
position: absolute; /* cho thẻ .bar hiển thị trong thẻ cha .container */
bottom: 0; /* thẻ .bar nằm ở dưới thẻ .container */
opacity: 0.2 /* thẻ .bar bị mờ đi */
******************************************
width: 100%;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 18px;
font-weight: bold;
background: #fff;
}
Hình 2:
<div class="container"> <div class="label">Hello world 2</div> <div class="bar"></div> </div>
.label {
/* nằm đè lên thẻ .bar
******************************************
position: absolute;
bottom: 0;
z-index: 10;
******************************************/
font-size: 18px;
font-weight: bold;
height: 50px;
line-height: 50px;
width: 100%;
text-align: center;
color: #fff;
}