使用CSS将图像覆盖添加到活动类

我不知道如何添加一个半透明的彩色叠加，其中有一个居中的文本，当它处于活动状态时，该文本表示“正在播放”。如何做到这一点？

垂直居中文本并不容易，但通过相对定位的包装器div和CSS伪类，可以实现95%的居中效果：

HTML:

---

请包括一把小提琴来演示你已经做了什么。垂直居中可以用两个伪类来完成<代码>顶部：50%；转化：translateY（-50%）对于其中一个上的文本和另一个上的bg，使用垂直居中的SVG文本进行了一些试验：

<div class="thumbnail active"><img src="http://placekitten.com/300/300"></div>

.thumbnail { position: relative; display: inline-block; }
.thumbnail.active:after { content: "NOW PLAYING"; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); box-sizing: border-box; -moz-box-sizing: border-box; padding: 10px; text-align: center; color: #fff; font-weight: bold; }
.thumbnail img { display: block; }