jquery - 使用 CSS 覆盖图像

Question

我想在单击此图像时覆盖内容和图像，但它只覆盖我的内容。

这里是以下代码:

HTML:

<div class="picture-sell-item">
    <%= image_tag ('angel.png') %>
</div>

CSS:

.picture-sell-item {
    position: relative;
    padding: 250px 0;
    text-align: center;
    &.active {
        background-color: rgba(255,0,0,0.8); 
        z-index: 10;
        height: 100%;
        width: 100%;
    }
}

JS:

$(".picture-sell-item img").on('click', function() {
    $(".picture-sell-item").addClass('active');
});

如有任何帮助，我们将不胜感激，谢谢。

Answer 1

更改环绕 div 的背景颜色不起作用，因为它位于 dom 中图像的下方。

但是，如果您使用伪 :before 元素，则可以将其放置在图像上方，因为它是一个单独的对象。

$(".picture-sell-item img").on('click', function() {
  $(".picture-sell-item").addClass('active');
});

.picture-sell-item {
  position: relative;
  padding: 20px 0;
  text-align: center;
}
.picture-sell-item.active:before {
  content: "";
  position: absolute;
  background-color: rgba(255, 0, 0, 0.8);
  z-index: 10;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="picture-sell-item">
  <img src="http://lorempixel.com/400/200/sports">
</div>