html - CSS background-image 在移动浏览器上被扭曲和放大

问题描述

我的网站上有两张背景图片，都带有 CSS。初始登录页面图像在桌面和移动设备上都可以完美运行，但是第二个在 Safari 中失真。我已经尝试了我在网上找到的所有解决方案，但没有任何效果。

着陆图像最初是扭曲的，但我在网上找到了一个解决方案，效果很好，如下（以防万一）：

'''
    <div class="home-wrap">
        <div class="home-inner">
        </div>
    </div>
'''

'''
.home-wrap {
    position: fixed; 
    top: -50%; 
    left: -50%; 
    width: 200%; 
    height: 200%;
}
  .home-inner {
    background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute; 
    width: 100%;
    height: 100%;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    margin: auto; 
    min-width: 50%;
    min-height: 50%;
    z-index: -100;
    max-width: 100%;
    overflow-x: hidden;
}
@media only screen and (max-width: 767px) {
    .home-inner {
      background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('../images/bgmob.jpg'); 
      background-size: cover;
      background-attachment: scroll;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      height: 100%;
      position: fixed; 
      top: 0; 
      left: 0; 
      right: 0; 
      bottom: 0; 
      background-color: black;
      overflow-x: hidden;
    }
 }
'''

以下是第二张失真的背景图片：

'''
    <div class="bg-wrap">
        <div class="fixed-background">
        </div>
    </div>
'''

'''
.bg-wrap{
    position: relative; 
    height: 100%;
    width: 100%;
}
.fixed-background {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),url(../images/bg2.jpg);
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1; 
    position: relative; 
    margin-bottom: 0; 
}
@media only screen and (max-width: 767px) {
    .fixed-background {
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../images/bg2mob.jpg');
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        background-attachment: scroll;
        position: fixed; 
        height: 100vh;
        overflow-x: hidden;
    }
 }
'''

我知道 Safari 移动浏览器对背景图像的反应不佳，但我想如果我让第一个可以工作，那么第二个也应该可以工作。我觉得这可能与职位有关。我还有更小、更适合移动浏览器的图像，这些图像在上述媒体查询中可见。我已经尝试了无数的解决方案，所以这是我最后一次绝望的尝试。

标签： htmlcssiphone

html - CSS background-image 在移动浏览器上被扭曲和放大

问题描述

解决方案

推荐阅读