Question

我在我网站的图片库部分添加了视差效果。该效果在浏览器中的普通桌面和响应模式下效果很好。但是，当我尝试在我的手机（iPhone 6）中查看相同内容时，该部分中的背景不会保持固定，而是扩展到该部分的整个内容，使背景非常放大并且像素化。

这是我的HTML：

<section id="projects">
        <div class="parallax">
            <div class="container" style="padding-bottom: 30px;">
                <div class="row">
                    <h3 class="section-header-inverse wow fadeInUp" data-wow-delay="200ms" data-wow-duration="500ms">Our Projects</h3>
                </div>
                <div class="row">
                    <div class="container">
                        <div class="gallery">
                            <div class="row">
                                <div class="container">
                                    <div class="col-md-12">
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/500x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/750x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/600x300.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/900x800.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
                                            </div>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="container">
                                    <div class="col-md-12">
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/500x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/750x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/600x300.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/900x800.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
                                            </div>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="container">
                                    <div class="col-md-12">
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/500x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/750x500.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/600x300.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="Beautiful Image" /></a>
                                            </div>
                                        </div>
                                        <div class="col-sm-3">
                                            <div class="thumbnail">
                                                <a href="www/images/projects/900x800.png"><img class="img img-responsive" src="http://placehold.it/300x250/ffffff" alt="" title="" /></a>
                                            </div>
                                        </div>
                                        <div class="clear"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

这是本节的css：

#projects {
    text-align: center;
    padding-bottom: 2%;
}


/*Project Section CSS*/

.parallax {
    background-image: url('../images/backgrounds/bg.jpg');
    /* Set a specific height */
    /*height: 600px;*/
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.gallery img {
    max-width: 100%;
    max-height: 100%;
}

.gallery .row {
    padding-bottom: 10px;
}

@media (max-width: 767px) {
    .gallery .thumbnail {
        padding-bottom: 7px;
    }
}

.gallery .thumbnail {
    -webkit-transition: all 150ms ease-out;
    -moz-transition: all 150ms ease-out;
    -o-transition: all 150ms ease-out;
    transition: all 150ms ease-out;
}

.gallery .thumbnail:hover {
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);
    -webkit-transition: all 150ms ease-in;
    -moz-transition: all 150ms ease-in;
    -o-transition: all 150ms ease-in;
    transition: all 150ms ease-in;
}

我甚至尝试在属性中添加供应商前缀。但它仍然无效。请帮助我按预期工作。

可以访问该网站here

Answer 1

我正在展示一个适用于所有设备的示例，即IPhone，iPad，Android，Windows。你可以看到方法论的不同。

<!DOCTYPE html>
<html>
<head>
<title>Parallax</title>
</head>

<style>
.section-one {
position:relative;
height:662px;
}

.section-one:before {
content:'';
background:blue url('2.jpg') no-repeat;
position:fixed;
top:0;
left:0;
height:100%;
width:100%;
}
</style>

<body>
<section class="section-one"></section>
</body>
</html>

视差效果在浏览器中有效，但在移动设备

1 个答案: