html - 如何使背景图像适合所有屏幕尺寸？

Question

我的背景图片有问题。不知何故，在大屏幕上，头部被剪掉以适应屏幕。有没有一种方法可以确保无论屏幕大小如何，始终呈现 100% 的图片？ background-size 的初始属性是 cover，但是当以这种方式设置时，图像的顶部将被剪切以适合容器。当我将背景大小更改为 100% 100% 时，如下所示，我得到了我想要的结果，但图像的质量受到影响。有没有办法解决这个问题。我审阅了与背景图像相关的大多数文档，但没有一个给出我想要的结果。 html 和 body 高度/宽度都设置为 100%。

预先感谢您的帮助。 狮子座

.main .masthead {
    min-height: 100%;
    padding-top: 7.5rem;
    padding-bottom: 7.5rem;
    text-align: center;
    color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(92, 77, 66, 0.8)), to(rgba(92, 77, 66, 0.8))), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
    background: linear-gradient(to bottom, rgba(92, 77, 66, 0.8) 0%, rgba(92, 77, 66, 0.8) 100%), url(/_next/static/media/dr.cut_thebarbershow_blue.4a28589b.jpg);
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center center;
    background-size: 100% 100%;
    z-index: 1;
    width: 100vw;
}

sandbox

Answer 1

您应该在媒体查询中使用 cover 或 auto，这样它将根据屏幕尺寸覆盖整个区域。

background-repeat:no-repeat;
background-size:cover;