图片加边框，图片内容上加标签文字

最新推荐文章于 2023-03-01 11:40:35 发布

NESUX0524

最新推荐文章于 2023-03-01 11:40:35 发布

阅读量746

点赞数

分类专栏： css

本文链接：https://blog.youkuaiyun.com/xusen112/article/details/100552685

版权

css 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="UTF-8">
		<title>图片加边框图片内容上加标签</title>
 
		<style>
			
.class_outer {
	border:solid 2px red;
	display: block;
	width: 200px;
	height: 276px;
	margin: 10px auto;
	position: relative;
	overflow: hidden;
}

.class_cover {
	/* width: 100%; */
	height: 14px;
	line-height: 14px;
	padding-right: : 5px;
	text-align: right;
	background-color: rgba(255, 0, 0, 1);
	color: #FFFFFF;
	font-size: 12px;
	position: absolute;
	right:  0px;
	top: 0px;

}

			
		</style>
 
	</head>
 
	<body>
 
		<div class="class_outer" >
			<img src="53088590.jpg" width="200px" height="276px" />
			<span class="class_cover">Test span</span>
		</div>
 
	</body>
 
</html>

忘了来源了，也是在网络上其他人分享的