图片右侧加文字html完整代码,怎么用css在图片右下方添加文字

有时候在一些广告图片的下面显示“广告”字眼，或者在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;

}

广告