Question

首先图像覆盖了整个背景，但由于太大而继续覆盖

CSS：

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

然后我这样做是为了阻止图像重复并完全适合背景，但问题是它留下了一个白色的底部并且不适合整个背景。如果我只做背景覆盖，它会太大并且变得模糊。

Answer 1

我们没有太多工作要做。但您可以采取以下措施来防止图像模糊。

首先，确保 let result = [] let arr = [1, 2, 3, 5, 1, 3] arr.forEach(e => arr.indexOf(e) === arr.lastIndexOf(e)?result.push(e):null) console.log(result) 设置为 background-size 不要给它一个固定的大小值，这会导致它更模糊

第二，确保您使用的是高质量/高分辨率的图像，并尽量尊重图像的比例。

通过这样做，您可以防止图像中出现不必要的模糊。

我推荐使用unsplash

的地方到处都可以找到一些高质量的图片

如果这还不够，您可能需要使用 cover 属性。 image-rendering MDN

如何使我的背景图像适合整个屏幕？

1 个答案: