編碼的世界 / 優質文選 / 生涯

CSS3 背景圖片顯示尺寸(放大/縮小背景圖)(background-size) (背景適配 自適應)

2022年8月03日
-   

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>

熱門文章