Как с помощью jquery найти на странице изображение в определенном блоке и добавить это изображение в качестве фона для блока с указанным классом
Есть следующая конструкция, в ней необходимо найти img в блоке с классом gamma и путь/адрес этого изображения назначить в качестве background-image для блока с классом alfa
.alfa {
padding: 15px;
background-size: cover;
}
.alfa div {
margin:10px;
padding: 20px;
background: #f8f8f8;
width: 300px;
}
.gamma img {
max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alfa">
<div class="delta">
Он был так угрюм, что его перестали посещать даже мысли.
</div>
<div class="gamma">
<img src="https://i.ibb.co/T4gQvgx/000.jpg">
</div>
<div class="omega">
Мудрость приходит с годами. А потом уходит…
</div>
</div>
Как результат у блока с классом alfa должно добавится свойство style="background-image:url(https://i.ibb.co/T4gQvgx/000.jpg);"> при этом адрес исходного изображения изначально неизвестен, его нужно найти после загрузки страницы в блоке gamma
Подскажите пожалуйста, как это реализовать с помощью скрипта?
Ответы (1 шт):
Автор решения: Slava
→ Ссылка
Нашел решение, возможно кому-то пригодится:
$('.alfa').css('background-image', 'url(' + $(".gamma img").attr("src") + ')');
.alfa {
padding: 15px;
background-size: cover;
}
.alfa div {
margin: 10px;
padding: 20px;
background: #f8f8f8;
width: 300px;
}
.gamma img {
max-width: 100%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="alfa">
<div class="delta">
Он был так угрюм, что его перестали посещать даже мысли.
</div>
<div class="gamma">
<img src="https://i.ibb.co/T4gQvgx/000.jpg">
</div>
<div class="omega">
Мудрость приходит с годами. А потом уходит…
</div>
</div>