div trong suốt trên hình ảnh nhưng văn bản mờ

Question

Tôi có mã HTML sau đây chỉ hiển thị hình ảnh với lớp phủ màu đen trong suốt có chứa văn bản.

Tôi không muốn văn bản của mình minh bạch. Tôi đã thử với z-index, nhưng văn bản của tôi vẫn còn minh bạch:

Có gì sai với mã của tôi?

Đây là HTML của tôi:

<div class="leftContainer"> 
    <div class = "promo"> 
     <img src="images/soon.png" width="415" height="200" alt="soon event" /> 

     <div class="hilight"> 
      <h2>Hockey</h2> 
      <p>Sample text</p> 
     </div> 

    </div> 

    ... 

</div> 

và đây là css của tôi:

.hilight h2{ 
    font-family: Helvetica, Verdana; 
    color: #FFF; 
    z-index: 200; 
} 

.promo { 
    position: relative; 
} 
.promo img { 
    z-index: 1; 
} 

.hilight { 
    background-color: #000; 
    position: absolute; 
    height: 85px; 
    width: 415px; 
    opacity: 0.65; 
    font-family: Verdana, Geneva, sans-serif; 
    color: #FFF; 
    bottom: 0px; 
    z-index: 1; 
} 

Answer 1

thay đổi nền của .hilight để rgba (0,0,0,0.65) và loại bỏ các opacity .

.hilight { 
background-color: rgba(0,0,0,0.65); 
position: absolute; 
height: 85px; 
width: 415px; 
font-family: Verdana, Geneva, sans-serif; 
color: #FFF; 
bottom: 0px; 
z-index: 1; 
} 

Answer 2

Mọi thứ bên trong sẽ có độ mờ là 0,65. Di chuyển văn bản ra ngoài lớp phủ div.

Answer 3

Bạn chỉ cần đặt độ mờ cho nền chứ không phải toàn bộ div và nội dung của nó. Bạn có thể làm điều này với lựa chọn rgba màu ví dụ

div { 
    background: rgba(0,0,0,0.50); 
} 

Một cách khác để làm việc đó sẽ được sử dụng một hình ảnh png bán trong suốt với một số background-position. Sau đó, thiết bị này sẽ tương thích với bộ chỉnh sửa ảnh số

Answer 4

Để sử dụng hỗ trợ trình duyệt chéo trong suốt hình ảnh 1x1 pixel png để thực hiện việc này.
Bạn có thể tạo ra các hình ảnh trên trang web này: http://www.1x1px.me/
Sau đó chỉ cần loại bỏ background-color và opacity và chỉ cần sử dụng background:url(bg.png);

jsFiddle Live Demo