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>