在图片右下方添加悬浮文字效果,纯CSS代码实现

你是不是经常看到访问的网站‘某些图片’的右下角有“广告”字样，那这样的悬浮文字提示是什么实现的呢，这里我们就分享用纯CSS代码实现吧。

演示图：

教程：

我们只需要将下方代码复制粘贴到你需要放置的主题设置中，然后修改代码中的图片链接就可以了。

当然，我们还可以使用left、right标签设置文字显示在左下还是右下。

代码：

<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="https://www.aaym.net"><em>广告</em>
	</a>
</div>