如何用半透明图像覆盖div？

Question

I want to cover a <div> so it looks like it has a semi-transparent block over it.

I am using jQuery but I do not know how to do it.

Any help thanks...

Answer 1

If you have another div , you can just get the dimensions + position like

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

and then use it while dynamically creating an overlay

$('<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);

Example: http://www.jsfiddle.net/GkFu4/1/

Answer 2

You could use CSS3 to do this. Position a <div> absolutely on top of it and give the <div> a background of: rgba(255,255,255,.3) .