javascript - jquery img 类覆盖

Question

我试图在我的图像框类上添加红色覆盖，但我无法得到结果，因为: 新的 overlay 类取代了旧的，我只得到红色背景。 除了旧类(class)之外，我还需要新类(class)。

这是我目前尝试过的:

$(function($) {
  $(document).on('click', '.wrapper', function(event) {
    var target = $(event.target).closest('.wrapper');
    
	target.find('.image-box').addClass("overlay");
    
  });
});

.image-box {
    height: 300px;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
}

.overlay{
	background-color:rgba(86, 61, 124, 0.55);
	transition: 0.5s;
	filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    height:150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
  </div>

Answer 1

您可以使用 :after 添加叠加层。检查更新后的代码。

$(function($) {
  $(document).on('click', '.wrapper', function(event) {
    var target = $(event.target).closest('.wrapper');
    
	target.find('.image-box').addClass("overlay");
    
  });
});

.image-box {
    height: 300px;
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    background-position: center;
    background-color: #4D4E56;
  position: relative
}
.image-box:after {
  opacity: 0;
  background-color: rgba(86, 61, 124, 0.55);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  content: "";
  transition: opacity 5s;
}
.overlay:after {
  opacity: 1;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="image-box"></div>
  </div>