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

Question

我需要在此网格上方使用RGBA背景。我使用了一些jQuery与div区域交互。但是当我使用jQuery时，我不知道如何将这种背景颜色放在图像中。有没有办法可以使用jQuery做到这一点？或任何其他方法？

// 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 a i {
  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

我不完全确定你想要什么，因为你的代码片段根本不起作用。

这会改变背景颜色：

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

要将颜色放在背景图像的顶部，可以使用渐变色：

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

Answer 2

就个人而言，我是这个小box-shadow: inset伎俩的粉丝。

只需添加一个像往常一样的背景，然后再添加 像这样添加box-shadow属性：

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

  

注意：任意选择1000px的扩展半径。只要确保它超出元素的宽度/高度。

Box Shadow Generator