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

Я попытался на CSS с помощью 'Z-индекс' и 'цвет фона'

как этот

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