Question

我目前正在处理一个网站项目，并且我尝试对多个<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)的不同背景图像，同时为所有背景应用相同的样式。

Answer 1

我认为您的CSS选择器存在问题。您需要在同一div（std::tie）上使用：nth-child。这样。

.article-image

有没有一种方法可以重用CSS样式，但背景图像不同？

1 个答案: