如何添加不同的背景顏色到多個figcaptions？

Question

你好，親愛的stackoverflowers，

我工作的一個網站，該背景顏色figcaptions的需要與圖像的背景是在對應上。所以基本上，多個不同的背景顏色爲多個figcaptions。是否可以添加ID或類？

我一直在尋找網絡廣泛而沒有找到答案，所以在這裏，我是，給你的輝煌人民！這是我目前所擁有的，這是非常基本的。

figcaption{ 
position: absolute; 
color: white; 
background: rgba(10,10,10,1); 
width:245px; 
height:30%; 
padding: 10px 20px; 

opacity: 100; 
bottom: 0; 
left: -30%; 
-webkit-transition: all 0.6s ease; 
-moz-transition: all 0.6s ease; 
-o-transition:  all 0.6s ease; 
} 

Answer 1

您可以向figcaption添加一個類並將背景顏色應用於該圖。

如果使用同一類的圖像和figcaption他們將有相同的背景色 - 如：

HTML

<img class="redbg"> 
<figcaption class="redbg">Caption</figcaption> 

CSS

.redbg{ background:red; } 

Answer 2

是的，我想你可以做到這一點。

figcaption{ 
    position: absolute; 
    color: white; 
    width:245px; 
    height:30%; 
    padding: 10px 20px; 

    opacity: 100; 
    bottom: 0; 
    left: -30%; 
    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    -o-transition:  all 0.6s ease; 
     } 
    .f1{ 
    background: rgba(10,10,10,1); //difference background 
    } 
    .f2{ 
    background: rgba(10,10,1,1); //difference background 
    } 
    .f3{ 
    background: rgba(10,10,10,1); //difference background 
    } 
    ... 
    .fn{ 
    ... 
    } 

所以上的JavaScript，你可以這樣做：

$(function(){ 
     for(var i = 0; i< $('figcaption'.length; i++){ 
     $('figcaption').eq(i).addClass('f' + Number(i+1)); 
     } 
    });