有沒有辦法重用 CSS 樣式但具有不同的背景圖像？

Question

我目前正在做一個網站項目，我正在嘗試對多個<a>使用相同的<style> ，但我想為所有這些設置不同的背景圖像，同時保留<style>功能。 我嘗試使用nth-child選擇器，但它不保留 CSS 的功能。

CSS

  #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) ;
    }

HTML

<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>

Ps我嘗試使用a:nth-child(1..2..3..4)但它沒有工作，因為它沒有使用樣式功能。 基本上我想設置將應用於<a>的不同背景圖像，同時為所有這些圖像應用相同的樣式。

Answer 1

我認為您的 css 選擇器有問題。 您需要在同一個 div ( .article-image ) 上使用:nth-child。 像這樣。

 #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:nth-child(2):before{ 
  background-image: url(./images/try2.jpg) ;
}
#par .article-image:nth-child(3):before{  
  background-image: url(./images/try3.jpg) ;
  }
#par .article-image:nth-child(4):before{ 
  background-image: url(./images/try4.jpg) ;
}

有沒有辦法重用 CSS 樣式但具有不同的背景圖像？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-05-26 12:51:36

有沒有辦法重用 CSS 樣式但具有不同的背景圖像？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-05-26 12:51:36

解決方案1
1 已采納 2020-05-26 12:51:36