html - 视差背景图像在移动设备上没有响应

Question

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

#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);
}