css+html的简单图片标签印（小标签图重叠在图片上）

应用场景：
产品列表页，有些产品由于点击进去的页面有360VR展示，想在这个列表页图片上加上VR的标志，以便吸引浏览者点击。

CSS部份

<!--css 部份-->
<style type="text/css">
.pdt_box {
position:relative; /*很重要的 relative*/
width:500px;
overflow:hidden;
}
.pdt_img:before{
position: absolute;	/*很重要的absolute */
top:40%;
left:40%;
content: url(/images/icon-vr360.png);/*水印图地址 */
opacity: 0.9;
}
</style>

<!--body 部份-->
<div class="pdt_box">
<div class="pdt_img">
<img src="/images/852586.jpg" style="width:100%"/>
</div>
</div>