有时候在一些广告图片的下面显示“广告”字眼,或者在gif动图也有显示,那么这个通过css怎么实现呢
我们来看html代码
广告
在看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等属性定位左上,左下 ,右上,右下
这样就达到想要的效果了
来段完整的代码
.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;
}