CSS叠加颜色与jinja2

Question

我想在jinja2中用彩色叠加图像。

list_img.html

{% for imgAlt, imgSrc in display_img %}
    <div class="img-display-div">
        <img src="{{ imgSrc|e }}" alt="{{ imgAlt|e }}" class="img-display">
    </div>
{% endfor %}

我尝试使用＆＃39; z-index＆＃39;和＆＃39;背景色＆＃39;

像这样

.img-display-div {
    position: absolute;
    overflow: hidden;
    z-index: 10;
}
.img-display {
    position: absolute;
    z-index: 11;
    background-color: rgba(0,0,0,0.2);
}

这没有用。图像背景颜色。  我认为jinja2使这不起作用。我也尝试过jQuery。

像这样

$(".img-display").css({
    "background-color" : "rgba(0,0,0,0.2)",
});

这也没有用。 我怎么能克服这个？

Answer 1

尝试以下方法：

.img-display-div {
  display: inline-block;
  position: relative;
}

.img-display-div:after {
  content:'';
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background: red;
  opacity: 0.5;
}