CSS - Áp dụng Độ mờ cho Phần tử nhưng KHÔNG ĐƯỢC ĐĂNG NHẬP trong Phần tử

Question

Tôi đã tạo thành phần khối menu mà tôi đã áp dụng độ mờ đục là 0,4/40.

Vấn đề tôi có là độ mờ ảnh hưởng đến văn bản trong khối menu và tôi đang tìm cách có độ mờ chỉ áp dụng cho khối menu, nhưng không phải là văn bản.

Hy vọng rằng tôi vừa bỏ lỡ điều gì đó ngớ ngẩn. Đây là mã của tôi:

#menuLeft{ 
    background-color: #33AAEE; 
    float: left; 
    width: 20%; 
    clear: both; 
    opacity:0.4; 
    filter: alpha(opacity = 40); 
} 

Tôi đang tìm cách giữ màu văn bản giống nhau/đặt độ mờ để loại trừ văn bản.

Cảm ơn bạn.

Answer 1

Đây là vấn đề rất, rất, rất phổ biến. Hãy thử sử dụng rgba():

//Your opacity is the latest value here for Firefox 3+, Safari 3+, Opera 10.10+ 
background-color: rgba(51, 170, 238, 0.6); 
//Your opacity is the first pair here (in HEX!) for IE6+ 
progid:DXImageTransform.Microsoft.gradient(startColorstr=#9A33AAEE,endColorstr=#9A33AAEE); 
zoom: 1; 
float: left; 
width: 20%; 
clear: both; 
/*opacity:0.4; 
filter: alpha(opacity = 40);*/ 

Bạn cũng có thể sử dụng http://css3please.com/ để dễ dàng chuyển đổi từ HEX để RGB và ngược lại.

Answer 2

Thử đặt văn bản trong phần tử span/div không có độ trong suốt

Answer 3

Bạn cũng có thể đặt ảnh trong suốt làm nền. Văn bản sẽ hiển thị bình thường. http://css-tricks.com/snippets/css/transparent-background-images/