Thủ thuật hiển thị nhãn sử dụng opacity trong CSS

Demo

Hãy xem sự khác biệt trong 2 hình ảnh dưới đây

Ở 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. Vậy thủ thuật ở đây là...

Hình 1

HTML

<div class="container">
    <div class="bar">Hello world 1</div>
</div>

CSS

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

Tất nhiên sẽ không có một cách nào có thể làm cho text trong thẻ .bar không bị mờ đi theo nó. Vậy thì phải chơi bằng 1 thẻ khác, đó chính là mấu chốt.

Hình 2

So sánh sự khác nhau giữa HTML của hình 2 và hình 1 sau đây

HTML 1

<div class="container">
    <div class="bar">Hello world 1</div>
</div>

HTML 2

<div class="container">
    <div class="label">Hello world 2</div>
    <div class="bar"></div>
</div>

Đến đây có lẽ bạn cũng đã hiểu được mấu chốt của vấn đề. Thẻ div.bar chỉ để hiển thị mờ, còn text ta sẽ đặt trong 1 thẻ khác. Giờ chỉ cần sắp xếp sao cho thẻ div.label nằm chồng lên thẻ div.bar nữa là xong.

CSS

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

Khá đơn giản phải không ?! Hy vọng thủ thuật này sẽ giúp ích nhiều cho bạn trong công việc thiết kế website.