IIIu6ko
@IIIu6ko

"Динамический" url у background-image?

Имеется 6 вот таких блоков на html:

<div class="teammate-1">
	<div class="teammate-info-1">
		<h4>AL RAYHAN <span>/ UI Designer</span></h4>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, blanditiis?</p>
		<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
		<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
		<a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
		<a href="#"><i class="fa fa-envelope-o" aria-hidden="true"></i></a>
	</div>
</div>


И вот такие стили на sass:

[class*="teammate-"]
	background: url("../img/teammate1.jpg") no-repeat center center
	background-size: cover
	width: 370px
	height: 440px
	padding: 184px 20px 15px 20px

	&:hover
		[class*="teammate-info"]
			opacity: 1

[class*="teammate-info"]
	opacity: 0
	width: 330px
	height: 240px
	padding: 40px
	background-color: #70f6eb
	transition: all 600ms ease-in-out

	i.fa
		padding-right: 12px


Также имеются фото тиммейтов в количестве 6 штук с названиями teammate1.jpg - teammate6.jpg

Возможно ли как-то, только на css, сделать динамический (или как лучше это назвать?) url у background?
Что бы у каждого div'a с классом teammate-*(1-6) был свой background?

Или как применить все свойства от background (no-repeat center center, background-size: cover) к тегу img?

Или как сделать подстановку нужного урла в нужный див на js? (в js просто не силён, ток разбираюсь)
  • Вопрос задан
  • 873 просмотра
Решения вопроса 1
delphinpro
@delphinpro Куратор тега CSS
frontend developer
@for $i from 1 through 6 {
  .teammate-#{$i} {
    bacground-image: url('/images/teammate-#{$i}');
  }
}
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
<div class="teammate-1" style="background-image: url('...');">
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы