背景图像完全覆盖元素区域

Examples

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>背景图像完全覆盖元素区域</title>
	<style>
		div{
			margin:2px;
			float:left;
			border:1px solid red;
			background:url(https://www.baidu.com/img/bd_logo1.png) no-repeat center;
			background-size:cover;	/*设计背景图像完全覆盖元素区域*/
		}
		.h1{
			width:100px;
			height:100px;
		}
		.h2{
			width:384px;
			height:240px;
		}
	</style>
</head>
<body>
	<div class="h1"></div>
	<div class="h2"></div>
</body>
</html>

效果图

image

posted on 2022-09-09 14:53  小馬過河﹎  阅读(23)  评论(0)    收藏  举报

导航