Basic CSS - how to overlay a DIV with semi-transparent DIV on top

Question

I m struggling to make this render right in my browser  Chrome   I have a wrapper holding all the elements of the HTML  and I want to have a DIV  lets call it div-1  that hold a image  and has a overlay div on top of it to the left  like I sketched in this picture   any quick solutions

User · Answer

foo      position   relative     foo  wrapper       background-image   url  semi-trans png        z-index   10      position   absolute      top   0      left   0      lt div class  foo  gt      lt img src  example png    gt      lt div class  wrapper  gt  amp nbsp  lt  div gt   lt  div gt

User · Answer

For a div-Element you could just set the opacity via a class to enable or disable the effect    mute-all      opacity  0 4

User · Answer

Here s a pure CSS solution  similar to DarkBee s answer  but without the need for an extra  wrapper div    dimmed     position  relative      dimmed after     content         z-index  10    display  block    position  absolute    height  100     top  0    left  0    right  0    background  rgba 0  0  0  0 5       I m using rgba here  but of course you can use other transparency methods if you like

User · Answer

Like the answer previous  but I d put   before  just for stacking purposes  If you want to include text over the overlay  a common use case   using   before will should fix that     dimmed     position  relative      dimmed before     content         z-index  10    display  block    position  absolute    height  100     top  0    left  0    right  0    background  rgba 0  0  0  0 5

User · Answer

Using CSS3 you don t need to make your own image with the transparency   Just have a div with the following  position absolute  left 0  background  rgba 255 255 255  5     The last parameter in background   5  is the level of transparency  a higher number is more opaque    Example Fiddle

[css] Basic CSS - how to overlay a DIV with semi-transparent DIV on top

Examples related to css

Examples related to html