Question

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

它在桌面上完美运行。我现在知道这不适用于iPhone，因此我使用媒体查询从iPhone版本中删除了此代码。（我可以忍受后备。）在iPhone 5上，背景图像可以扩展到无法识别的视图 - 如此之大以至于它只是像素。

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

我删除了所有媒体查询。我甚至删除了背景附件：固定属性无济于事。以下是该网站所在位置的链接：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");
    }

Answer 1

使用此并删除所有其他代码

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

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

Answer 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]

完整的背景图片在iPhone 5上扩展得很差

2 个答案: