CSS3 背景图片显示尺寸(放大/缩小背景图)(background-size) (背景适配自适应)

最新推荐文章于 2025-03-11 12:09:31 发布

houyanhua1

最新推荐文章于 2025-03-11 12:09:31 发布

阅读量5.9w

点赞数 17

本文链接：https://blog.csdn.net/houyanhua1/article/details/79646767

版权

CSS 同时被 3 个专栏收录

65 篇文章

订阅专栏

HTML5

54 篇文章

订阅专栏

CSS3

33 篇文章

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>

		.box {
			width: 500px;
			height: 500px;
			margin: 100px auto;
			border: 1px solid #000;
			background: url("11.png") no-repeat;

			/* 背景图片显示尺寸(放大/缩小背景图) */
			background-size: 200px 200px;  /* 通过像素设置 */
			background-size: 50% 50%;    /* 通过百分比设置 */
			background-size: cover;      /* 覆盖:图片成比例填满盒子。可用于适配 */
			background-size: contain;     /* 包含:图片成比例放大,可能不会填满盒子。可用于适配  */
		}

	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>