css如何设置背景图片大小

背景图片大小

在CSS中，可以使用background-size属性来设置背景图片的大小。

background-size属性允许将图像缩放到适合的大小，或根据容器的大小平铺图像。

设置背景图片的大小为实际尺寸

如果希望背景图片的大小与实际尺寸相同，则可以将background-size属性设置为auto。

		body {
			background-image: url('bg.jpg');
			background-repeat: no-repeat;
			background-size: auto;
		}	
	

将背景图片缩放到容器的大小

如果希望背景图片能够随着容器的大小自适应，则可以使用background-size属性来缩放图片。

		body {
			background-image: url('bg.jpg');
			background-repeat: no-repeat;
			background-size: contain;
		}
	

上述代码将保持背景图片的纵横比例，并且缩放到刚好适合容器大小。

将背景图片平铺到容器中

如果希望背景图片铺满整个容器，则可以使用background-size属性来平铺图片。

		body {
			background-image: url('bg.jpg');
			background-repeat: repeat;
			background-size: 100% 100%;
		}
	

上述代码将背景图片平铺到整个容器，并且强制将图片拉伸以适应容器大小。

总结

通过使用background-size属性，我们可以设置背景图片的大小。我们可以将图片缩放到适合容器大小，保持图片的纵横比例或者将其拉伸以适应容器大小。使用这些技巧，可以增强网站的美观性和可读性。