Почему: перед псевдотеком не добавляется наложение цвета на этот рисунок.

Question

Нужно, чтобы этот цвет накладывался для покрытия этого изображения, но это не так. Возможно ли это с помощью рисунка/figcaption? Я действительно не понимаю, почему это не работает. У меня он установлен как это несколько других мест на моем веб-сайте для класса. спасибо. HTML

<figure> 
<img src="img/cala.jpg"> 
<figcaption>About This</figcaption> 
</figure> 

CSS

figure { 
} 
figure img { 
    width: 80%; 
    position: relative; 
} 
figure > img:before { 
    position: absolute; 
    content: ''; 
    width: 100%; 
    height: 100%; 
    background: rgba(11, 52, 150, 0.5); 
    z-index: 9001; 
} 
figcaption { 
    text-align: right; 
    margin-right: 10%; 
} 

благодаря

Answer 1

:before псевдо элемент не делает работу по img элементов

Here is what the spec says ...

Примечание. Эта спецификация не полностью определяет взаимодействие :before и :after с замененными элементами (например, IMG в HTML). Это будет определено более подробно в будущей спецификации.

Answer 2

большинство браузеров не поддерживают :before и :after элементы на пер. попробуйте вместо этого на figcaption.

figure figcaption:before { 
    position: absolute; 
    content: ''; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
    background: rgba(11, 52, 150, 0.5); 
}