如何用半透明图像覆盖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)的背景。