Giải pháp với 1 div và KHÔNG hình ảnh trong suốt:
Bạn có thể sử dụng tính năng CSS3 đa nền tảng và đặt hai nền: một có hình ảnh, một nền có bảng trong suốt trên đó (vì tôi nghĩ không có cách nào để đặt trực tiếp độ mờ của hình nền):
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%), url(bg.png) repeat 0 0, url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,0.7))), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -webkit-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -o-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: -ms-linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
background: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(https://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png) repeat 0 0;
Bạn không thể sử dụng rgba(255,255,255,0.5)
vì một mình nó chỉ được chấp nhận ở mặt sau, vì vậy bạn đã sử dụng các gradient được tạo cho mỗi trình duyệt cho ví dụ này (đó là lý do tại sao nó quá dài). Nhưng khái niệm này là như sau:
background: tranparentColor, url("myImage");
http://jsfiddle.net/pBVsD/1/
opacity: ...
trong tất cả các trình duyệt, nó tốt hơn!