完整的背景图像在 iPhone 5 上的放大效果不佳

Posted 2023-03-11

【中文标题】完整的背景图像在 iPhone 5 上的放大效果不佳

【英文标题】：Full background image scales up poorly on iPhone 5

【发布时间】：2016-12-07 23:26:59

【问题描述】：

我有一个在多个 div 中显示背景图像的单页网站。我使用background-attachment: fixed 给它一个伪视差滚动效果。

它在桌面上完美运行。我现在知道这在 iPhone 上不起作用，所以我使用媒体查询从 iPhone 版本中删除了这段代码。 （我可以忍受后备。）在 iPhone 5 上，背景图像放大到无法识别的视图——大到只有像素。

如何调整图像大小以适合手机的浏览器窗口？我到处寻找答案。

我删除了所有媒体查询。我什至删除了 background-attachment: fixed 属性无济于事。这是该站点所在位置的链接：http://www.mywebdesignstudio.net/danielleb_KKC（我放回了背景附件：已修复）如果您在 iPhone 5 上查看它，照片太大了。这适用于台式机、笔记本电脑和平板电脑，但不适用于手机 - 因此媒体查询以换出照片以查看它是否有效。随意查看整个代码的页面源代码。

这是 CSS 代码：

@viewport
    zoom: 1.0;
    width: device-width;


body, html 
    height: 100%;
    margin: 0;
    font: 1em/1.8 "Arial", sans-serif;
    color: #777;



.bgimg-1, .bgimg-2 
    position: relative;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;


.bgimg-1 
    background-image: url("pic4ghost.png");
    min-height: 100%;


.bgimg-2 
    background-image: url("radio.png");
     min-height: 550px;


@media only screen and (max-width: 767px)
    .bgimg-1 
        background-image: url("pic4ghostMOBILE.png");
        min-height: 100%;
    


    .bgimg-2 
        background-image: url("radioMOBILE.png");
        min-height: 400px;
    


@media only screen and (min-device-width: 320px) and (max-device-width: 480px)

   .bgimg-1, .bgimg-2 
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    


    .bgimg-1 
        background-image: url("pic4ghostsmartphone.png");
    

    .bgimg-2 
        background-image: url("radiosmartphone.png");
    

【问题讨论】：

链接到本站所在位置：mywebdesignstudio.net/danielleb_KKC

【参考方案1】：

使用这个并删除所有其他代码

.bgimg-1 
background:url("pic4ghost.png") no-repeat center center fixed;
background-size:cover;

删除所有其他类和媒体查询

【讨论】：

我删除了所有媒体查询。我什至删除了 background-attachment: fixed 属性无济于事。这是网站所在位置的链接：

我删除了所有媒体查询。我什至删除了 background-attachment: fixed 属性无济于事。这是该站点所在位置的链接：mywebdesignstudio.net/danielleb_KKC（我放回了背景附件：已修复）如果您在 iPhone 5 上查看它，照片太大了。这适用于台式机、笔记本电脑和平板电脑，但不适用于手机。因此，媒体查询换出照片以查看它是否有效。随意查看整个代码的页面源代码。

【参考方案2】：

您是否尝试过使用background-size: 属性？

这是一个代码示例。请注意，第一个声明的背景将位于其余部分之上。

// Gradient, image and flat color as a fallback;
.bgimg-1 

background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)), url("paper.gif"), black;
background-size: auto, cover, auto;

我使用的是标准语法，因为 CSS3 是这几天的普遍做法，如果您有向后兼容的需求，请查看 [caniuse.com]

【讨论】：

我试过自动，100% 甚至包含。由于某种原因，它似乎忽略了我所做的一切。我按照某人的建议删除了媒体查询。我使用了 W3 Schools 方法来实现伪视差滚动效果。