Не работает nth-child() по идее должно быть три разных фона трем блокам, но у меня везде одинаковой фон =(
.block{
width:200px;
border:1px solid black;
height:150px;
margin:20px;
display:inline-block;
}
.text{
color:red;
font-size:20px;
position:absolute;
}
.Background-img{
height:100%;
width:100%;
background-size: cover;
margin:0;
padding: 0;
}
.Background-img:nth-child(1) {
background-image: url('https://i.ibb.co/68rFc89/1560329641-2.jpg');
}
.Background-img:nth-child(2) {
background-image: url('https://i.ibb.co/wJFNhpN/multfilm-lyagushka-32117.jpg');
}
.Background-img:nth-child(3) {
background-image: url('https://i.ibb.co/5jMv9vd/detail-2b7c4f333c37580ee03adaa3bc47c4da.jpg');
}
<div class ="block">
<a class ="Link" href=""></a>
<p class ="text"> 1 </p>
<figure class="Background-img"> </figure>
</div>
<div class ="block">
<a class ="Link" href=""></a>
<p class ="text"> 2 </p>
<figure class="Background-img"> </figure>
</div>
<div class ="block">
<a class ="Link" href=""></a>
<p class ="text"> 3 </p>
<figure class="Background-img"> </figure>
</div>
Background-img
является третьим элементом внутри элементаblock
. Первыми являются элементыLink
, вторыми являются элементыtext
block
, то значит и добавлятьnth-child
нужно именно кblock
:.block:nth-child(1) .Background-img {