Использование псевдоэлемента :before для отображения изображения с помощью тега <img> не является стандартным способом и может вызывать проблемы с отображением.
Основная причина проблемы заключается в том, что псевдоэлементы, такие как :before, не могут содержать внутри себя содержимое тега <img>, так как они генерируются с помощью CSS и не являются реальными элементами DOM. Поэтому попытка использовать <img> внутри псевдоэлемента ничего не даст.
Вместо этого, стандартный подход в HTML для отображения изображений – это использование тега <img>, в котором вы указываете путь к изображению через атрибут src. Если вы хотите создать эффект фона с помощью изображения, то лучше использовать свойство CSS background-image, а не элемент <img>.
Например, вот как можно создать фоновое изображение с использованием свойства background-image вместо псевдоэлемента:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
position: relative;
}
.container::before {
content: "";
display: block;
width: 100%;
height: 100%;
background-image: url(path/to/image.jpg);
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
</html>
В этом примере создается контейнер с классом "container" и с помощью псевдоэлемента ::before применяется фоновое изображение с помощью свойства background-image. Значения свойств background-size и background-position контролируют масштабирование и позиционирование изображения в соответствии с вашими требованиями.
Надеюсь, это помогло вам понять, почему <img> не работает с псевдоэлементом :before и как можно достичь желаемого эффекта с помощью свойства background-image.