html - 如何在另一个背景图像上获取带有文本的div

Question

我需要像这样获取div内容

其中“time”是background-image上的文字

Answer 1

使用 CSS 定位技术，这里只是在设置为 position: relative; 的父元素下嵌套一个设置为 position: absolute; 的元素.我还使用 rgba 作为不透明 border 最后但并非最不重要的是，我使用 bottom 和 right 属性设置为 0 将计时器定位在右下角。

Demo

div {
    height: 200px;
    width: 280px;
    background: url(http://pimg.tradeindia.com/00288122/b/0/Our-Valuable-Client-List-Click-on-Image-.jpg);
    border: 5px solid rgba(0,0,0,.4);
    position: relative;
}

div span {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 5px;
    font-weight: bold;
    font-size: 14px;
    font-family: Arial;
    color: #fff;
    background: rgba(0,0,0,.5);
}