CSS 背景图像在真实智能手机的浏览器中没有响应

Question

我有下面这样的 CSS，在 PC 浏览器中测试时它是响应式的，我已经在响应式设计模式下测试过它是正常的，但是当我在手机上测试时，背景没有响应：

.imgBG {
  background: url(../../../assets/img/bg-img/bg-login-blur.jpg) no-repeat center center fixed;
  font-family: Open Sans;
  padding-top: 40px;
  padding-bottom: 40px;
  position: fixed;
  width:100%;
  height:100%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  padding:20px;
 }

我错过了什么，你能告诉我吗？

Answer 1

在您的 HTML 标头中添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 2

将此行添加到代码中：background-attachment: fixed;

Answer 3

使用此代码。

 .imgBG { 
    background-image: url(../../../assets/img/bg-img/bg-login-blur.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
}