@xxxxxxx23

Как добавить индивидуальный фон для каждого изображения?

Задумка: добавить несколько изображений на сайт, при наведении картинка меняется. И при таком коде ниже (он относится только к одному изображению), у меня background устанавливается один на вообще все изображения. В других кодах -к другим изображениям у меня меняются только ссылки. Как сделать так, чтобы background прикреплялся индивидуально, а не распространялся на все? (я так понимаю он распространяется на тег a) Что нужно изменить в коде? Напишите пожалуйста кодом ответ, а то я не программист)

<div class="alignleft post_thumbnail">
<a href="https://www." >
<img width="100%" src="https://">
</a>
</div>
<style>
.alignleft post_thumbnail {
background:none repeat scroll 0 0 #FFF;
}
.alignleft post_thumbnail > a {
    position:relative;
	display:block;
}
.alignleft post_thumbnail > a:before {
	display:none;
	content:'';
	position:absolute;
	top:0;
	left:0;
	object-fit: cover;
    width: 100%;
    height: 100%;
	background-size:contain;
	background-image: url('https://');
}
.alignleft post_thumbnail > a:hover:before {
	display:block;
}
</style>
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
@alexalexes
Добавить какой-нибудь специфичности в селекторы, которые определяют фоновую картинку.
Например, по порядку следования тегов post_thumbnail (это точно тег, вы с классом не перепутали?):
.alignleft post_thumbnail:nth-child(1) > a:before {
	background-image: url('icon_1.png');
}
.alignleft post_thumbnail:nth-child(2) > a:before {
	background-image: url('icon_2.png');
}
.alignleft post_thumbnail:nth-child(3) > a:before {
	background-image: url('icon_3.png');
}

Или добавить индивидуальные классы тегам, добавляющие специфичность тега post_thumbnail:
.alignleft post_thumbnail.icon_1 > a:before {
	background-image: url('icon_1.png');
}
.alignleft post_thumbnail.icon_2 > a:before {
	background-image: url('icon_2.png');
}
.alignleft post_thumbnail.icon_3 > a:before {
	background-image: url('icon_3.png');
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы