Question

您好亲爱的stackoverflowers，

我正在开设一个网站，其中 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));
      }
    });

如何为多个figcaptions添加不同的背景颜色？

2 个答案: