css - 如何为多个图形说明添加不同的背景颜色？

Question

你好亲爱的stackoverflowers，

我在一个网站上工作，其中 figcaptions 的background color 需要与它所在图像的背景。所以基本上，多个图形说明有多种不同的背景颜色。是否可以添加 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 添加一个类并为其应用背景颜色。

如果您对图像和图形说明使用相同的类，它们将具有相同的背景颜色 - 例如:

HTML

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

CSS

.redbg{ background:red; }