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

Question

我不确定如何添加一个半透明的彩色叠加层，其中有一个居中的文字，当它处于活动状态时会向流畅的缩略图显示“现在正在播放”。我该怎么做呢？

Answer 1

垂直居中不会那么容易，但你可以通过相对定位的包装div和CSS伪类获得95％的方式：http://jsfiddle.net/ChrisLTD/FWtA3/

HTML：

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

CSS：

.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; }