在css中以较小的屏幕裁剪背景图像

Question

我正在尝试设置背景图像，它将以屏幕分辨率的每个比例拍摄完整图像。我的代码适用于特定的屏幕分辨率。如果我将浏览器分辨率降低到更小，则 100% 背景图像会相应地被裁剪。但我不想要这个。这是我的代码。提前致谢

.background1 {
    background: url('/images/home/background_img.png'),linear-gradient(270deg, rgba(4, 202, 160, 
  1) 0%, rgba(141, 198, 63, 1) 100%);
    margin-top: -60px;
    background-repeat:no-repeat;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-size:100% 100%;
    background-position:center;

}

Answer 1

将高度设置为视口宽度单位 (vw) 或使用 padding hack 来强制设置纵横比。见this related question.