有时候在一些广告图片的下面显示“广告”字眼,或者在gif动图也有显示,那么这个通过css怎么实现呢
我们来看html代码
<a href="#" target="_blank"> <img src="#"><em>广告</em> </a>
在看em的css是怎么定义的,这么需要用到定义的属性
a { display: block; position: relative; }
父元素的 position: relative;然后我们在来设置em属性
a em { position: absolute; right: 0; bottom: 0px; background: #fff; color: #666; padding: 0px 5px; border-radius: 3px 0 0 0; opacity: 0.3; font-size: 12px; font-style: normal; }
然后子元素定位为 position: absolute;然后加上top ,left,bottom等属性定位左上,左下 ,右上,右下
这样就达到想要的效果了
来段完整的代码
<style> .demo a { display: block; position: relative; } .demo a em { position: absolute; left: 0; bottom: 0px; background: #fff; color: #666; padding: 0px 5px; border-radius: 3px 0 0 0; opacity: 0.3; font-size: 12px; font-style: normal; } </style> <div class="demo"> <a href="#" target="_blank"> <img src="http://www.freemoban.com/img/ucp.jpg"><em>广告</em> </a> </div>