我目前正在处理一个网站项目,并且我尝试对多个<style>
使用相同的<a>
,但是我想为所有这些图像设置不同的背景图片,同时保留{ {1}}功能。我尝试使用<style>
选择器,但是它不保留CSS的功能。
CSS
nth-child
HTML
#par .article-image:before {
content: '';
position: absolute;
background-size: cover;
background-position: center center;
height: 100%;
width: 100%;
max-width: 400px;
top: 0;
left: 0;
background-image: url(./images/try1.jpg);
filter: grayscale(0) blur(0);
transition: .4s ease-in-out;
}
#par .article-image:hover:before {
-webkit-filter: grayscale(50%) blur(2px);
filter: grayscale(50%) blur(2px);
transition: .4s ease-in-out;
}
#par .article-image:before a:nth-child(2){
background-image: url(./images/try2.jpg) ;
}
#par .article-image:before a:nth-child(3){
background-image: url(./images/try3.jpg) ;
}
#par .article-image:before a:nth-child(4){
background-image: url(./images/try4.jpg) ;
}
建议,我尝试使用<body>
<div id="par" class="expanded button-group hollow no-gaps parent" style="height:500px" >
<a class="large button th article-image">1
<div class="middle"> <div><img src="./images/1.jpg" /></div> </div> </a>
<a class="large button th article-image">2
<div class="middle"> <div><img src="./images/2.jpg" /></div> </div> </a>
<a class="large button th article-image">3
<div class="middle"> <div><img src="./images/3.jpg" /></div> </div> </a>
<a class="large button th article-image>4
<div class="middle"> <div><img src="./images/4.jpg" /></div> </div> </a>
</div>
</body>
,但由于未使用样式功能,因此无法正常工作。基本上,我想设置要应用于a:nth-child(1..2..3..4)
的不同背景图像,同时为所有背景应用相同的样式。
答案 0 :(得分:1)
我认为您的CSS选择器存在问题。
您需要在同一div(std::tie
)上使用:nth-child。这样。
.article-image