html - 如何使位于网站顶部的图像正确放大或缩小？

Question

我的网站顶部有一个空间，那里有一张图片。

图像宽度为 2800 像素，高度为 400 像素。

我想在这张图片的顶部预留 400 像素，但由于图片太宽了，有没有办法让它适合而不让它看起来模糊？

<div class="bg"></div>

---

.bg {
    background: url('..//img/top-img.jpg') no-repeat center center;
    position: fixed;
    width: 100%;
    height: 400px; 
    top:0;
    left:0;
    z-index: -1;
}

Answer 1

您可以将其添加到您的.bg

background-size: cover;

但是这会在需要时裁剪您的图像

关于模糊度？这里没有解决方案，只能让您的图片变大，但正如我所见，您的图片已经足够大，将其变大会使加载速度变慢。