纯css实现给图片加标签

最新推荐文章于 2024-05-10 18:05:41 发布

草巾冒小子

最新推荐文章于 2024-05-10 18:05:41 发布

阅读量6.8k

点赞数

分类专栏： CSS 3 img图片处理

本文为CSDN博主原创文章，不允许其他平台转载。擅自转载至其他平台，严肃追究！

本文链接：https://blog.csdn.net/qq_35393869/article/details/80928271

版权

CSS 3 同时被 2 个专栏收录

60 篇文章 3 订阅

订阅专栏

img图片处理

42 篇文章 2 订阅

订阅专栏

纯css实现给图片加标签

原理：通过border、before、after、content、position定位，等等属性实现给图片添加标签样式。

效果截图如下：

这里写图片描述

代码实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>banner图片标签</title>
		<style type="text/css">
			img{width: 500px;}
			.tags{margin: 100px auto auto 100px;}
			.tags:before{
				position: absolute;top: 5px;left: -8px;z-index: 1;
				padding-right: 10px;font-weight: bold;color: #000;
				height: 0px;line-height: 0px;
				border: #EE7600 15px solid;
				border-right-color: transparent;
				content: "图片";
				box-shadow: -0px 5px 5px -5px #000;
			}
			.tags:after{
				content: "";
				position: absolute;top: 35px;left: -8px;
				border: #89540c 4px solid;
				border-left-color: transparent;
				border-bottom-color: transparent;
			}
		</style>
	</head>
	<body>
		<div class="tags" style="position: relative;">
			<img src="images/03.jpg" alt="网络图片"/>
		</div>
	</body>
</html>