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元素，则可以将其置于图像上方，因为它是一个单独的对象。

＆＃13;

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

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

用CSS叠加图像

1 个答案: