Question

这是我的css，它为视差滚动添加了图像。它工作正常，但是当涉及移动视图时，图像显示但不是响应的完整图像。

#parallax-world-of-ugg .parallax-two {
    padding-top: 200px;
    padding-bottom: 200px;
    overflow: hidden;
    position: relative;
    width: 100%;
    background-image:url(../img/sri-lanka.jpg);
    background-attachment: fixed;
    background-size: contain;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

这是mt html：

<div id="parallax-world-of-ugg">
    <section>
        <div class="title">
            <h3>Let's Find out about</h3>
            <h1>Trip GO Sri Lanka</h1>
        </div>
    </section>

    <section>
        <div class="parallax-one">
            <h2></h2>
        </div>
    </section>

    <section>
        <div class="block">
            <p>
                <span class="first-character sc">S</span>ri Lanka is a well known
                beauty spot,where people are blindly attracted to visit this
                splendid little island,because of its natural,social,cultural &
                political background.
            </p>
            <p class="line-break margin-top-10"></p>
            <p class="margin-top-10">
                So the Trip Go Sri lanka is here to provide you with all
                Facilities to soothe your journey. We help you to explore all
                natural,cultural, social destination with best hospitality,
                comfort, safety and guidance at the very best based on ECO
                tourism
            </p>
        </div>
    </section>
</div>

Answer 1

我认为由于移动设备的屏幕尺寸要小得多，因此在尺寸和文件大小方面，针对桌面的视差效果中使用的默认图像通常会在较小的对应设备中过大。

解决此问题的一种方法是使用Media-Query并使用较小版本的背景图片。

如果屏幕小于......像素，请使用媒体查询更改为较小尺寸的背景图像。

你会得到类似的东西：

@media screen and (max-device-width: 860px){

body{
background-image: url(deepsea_small.jpg);
}

Answer 2

您尚未指定要为移动设备尺寸的屏幕测试哪种网络浏览器或操作系统。

如果您偶然使用iOS设备; iOS设备存在已知问题，无法显示同时具有background-attachment: fixed和background-size: cover

的图片

caniuse.com引用现有的StackOverflow问题作为此资源：

Background size on iOS

Answer 3

我找到了这个问题的完美答案，谢谢你的帮助..如果你有这个问题，请访问此链接..谢谢你...

https://inkplant.com/code/responsive-parallax-images

视差背景图像对移动设备无响应

3 个答案: