css如何让背景只显示一张

在前端开发中，我们经常需要使用 CSS 来设置网页的背景。有时候我们希望背景只显示一张图片，而不是像平铺一样重复显示。那么我们该如何实现呢？

首先，我们需要设置背景图片。可以使用以下代码：

	body {
		background-image: url("image.jpg");
	}

如果我们不做其他处理，背景图片会默认平铺。因此，我们需要设置背景图片的重复方式为 no-repeat。可以使用以下代码：

	body {
		background-image: url("image.jpg");
		background-repeat: no-repeat;
	}

此时，我们可以看到网页的背景只显示了一张图片。但是，图片可能会因为屏幕大小而被拉伸或压缩，影响图片的美观度。因此，我们还需要设置背景图片的位置以及背景尺寸，可以使用以下代码：

	body {
		background-image: url("image.jpg");
		background-repeat: no-repeat;
		background-position: center center;
		background-size: cover;
	}

这里的 background-position 属性设置了背景图片的位置为居中。background-size 属性设置了背景图片的大小为 cover，表示将图片缩放到刚好可以完整覆盖整个背景，所以图片不会被拉伸或压缩变形。

以上就是实现背景只显示一张图片的方法，我们可以根据自己的需求来对背景图片进行设置，让网页变得更加美观。