设置背景时图像模糊

在CSS中设置背景图像时，如果图像大小与容器大小不匹配，图像可能会出现模糊或失真的情况。为避免这种情况，可以使用以下方法：

1. 使用等比例缩放

通过设置背景图像的属性background-size为"cover"或"contain"，可以将图像等比例缩放以适应容器的大小。例如：

.container { width: 500px; height: 300px; background-image: url('path/to/image.jpg'); background-size: cover; }

2. 使用高清图片

为了避免图像失真和模糊，可以使用高清晰度的图像。例如，可以使用Retina屏幕分辨率的图像，像素密度比常规图像高两倍。例如：

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .container { background-image: url('path/to/image@2x.jpg'); background-size: cover; } }

以上是避免背景模糊的两种方法，根据情况选择适合自己的方式即可。