如何在图像或div区域上方放置RGBA背景？

Question

I need to use RGBA background above this grid. I used some of the jQuery to interect with div area. But I don't know how to put this background-color in image while I'm using jQuery. Is there a way I can do this using jQuery ? or any other methods ?

 // Grid function $(function() { $(".single_grid").hover(function() { var panelId = $(this).attr("data-panelId"); $("#" + panelId).css({}).toggle(); }) $(".single_grid").mouseover(function() { var imageId = $(this).attr("data-imageId"); $("#" + imageId).css({ opacity: "0.3" }) }) $(".single_grid").mouseleave(function() { var imageId = $(this).attr("data-imageId"); $("#" + imageId).css({ opacity: "1" }) }) }) 

 .grid_panel { width: 100%; height: auto; } #sub_grid_panel { height: 760px; margin: 0 auto; width: 1125px; } #sub_grid_panel li { float: left; } .single_grid { width: 280px; height: 200px; overflow: hidden; position: relative; top: 0px; left: 0px; } .image_hover_preview h3 { text-align: center; display: block; margin-bottom: 5px; font-weight: normal; font-family: 'RalewayLight'; color: #FF8500; } .image_hover_preview { position: absolute; top: 65px; width: 100%; display: none; } div.image_hover_preview ai { color: #333; font-size: 20px; padding: 5px 10px; background: #FF8500; color: #FFFFFF; } div.image_hover_preview { text-align: center; } 

 <li class="single_grid" data-panelId="panel1" data-imageId="image1"> <div class="grid_column_bar"> <img src="img/grid/grid1.jpg" alt="" id="image1"> <div class="image_hover_preview" id="panel1"> <h3>Lorem ipsum dolor</h3> <a href=""><i class="fa fa-search-plus"></i></a> <a href=""><i class="fa fa-link"></i></a> </div> </div> </li> <li class="single_grid" data-panelId="panel2" data-imageId="image2"> <div class="grid_column_bar"> <img src="img/grid/grid2.jpg" alt="" id="image2"> <div class="image_hover_preview" id="panel2"> <h3>Lorem ipsum dolor</h3> <a href=""><i class="fa fa-search-plus"></i></a> <a href=""><i class="fa fa-link"></i></a> </div> </div> </li> 

Answer 1

I'm not entirely sure what you wanted since your code snippet didn't work at all.

This changes the background color:

$(element).css({
    backgroundColor:"rgba(50,50,50,.5)"
});

To put the color on top of the background image, you can use gradients:

$(element).css({
    backgroundImage:"linear-gradient(rgba(50,50,50,.5),rgba(50,50,50,.5)),url(background.jpg)"
});

Answer 2

Personally, I'm a fan of this little box-shadow: inset trick.

Just add a background like you normally would and on top of that,
add a box-shadow property like so :

.element {
  background-image: url(myBgImage.jpg);
  box-shadow: inset 0px 0px 0px 1000px rgba(51,51,51,0.3);
}  

Note: the spread-radius of 1000px is arbitrarily chosen. Just make sure it exceeds the width/height of your element.

Box Shadow Generator