如何使用半透明圖像覆蓋div？

Question

我想覆蓋<div>，所以看起來它有一個半透明的塊。

我正在使用jQuery，但我不知道該怎麼做。

任何幫助謝謝...

Answer 1

如果您有其他div，你可以得到這樣

var $somediv = $('#some_div_element'), 
    pos  = $.extend({ 
     width: $somediv.outerWidth(), 
     height: $somediv.outerHeight() 
    }, $somediv.position()); 

，然後用它的尺寸+位置，而動態地創建一個覆蓋

$('<div>', { 
    id: 'overlay', 
    css: { 
     position:   'absolute', 
     top:    pos.top, 
     left:    pos.left, 
     width:   pos.width, 
     height:   pos.height, 
     backgroundColor: '#000', 
     opacity:   0.50 
    } 
}).appendTo($somediv); 

例子：http://www.jsfiddle.net/GkFu4/1/

Answer 2

你可以使用CSS3來做到這一點。定位一個<div>絕對頂部，並給<div>的背景：rgba(255,255,255,.3)。