Question

我有一个包含视差滚动的大图像的页面。

HTML：

<section class="parallax-top">
    <div class="caption">
    <h1><img src="../images/mainlogo.png" alt="Culture Smart!"></h1>
    <h2>Culture Smart! guides begin where other travel books end.</h2>
    <p>Our guides emphasize the people, not places. Written for the inquisitive traveler who wants more than information on hotels and sightseeing, they offer an insight into the rich human dimension of travel. Navigate your way abroad with over 100 country guides.</p>
    <p><a class="btn btn-primary btn-lg" href="destinations.php" role="button">Full list</a></p>
    </div>
</section>

<section class="box">
    <span class="border">
            <h2>About Culture Smart!</h2>
            <h4>The Essential Guide to Customs &amp; Culture</h4>
            <p>Culture Smart! provides essential information on attitudes, beliefs and behaviour in over 100 different countries.</p>
            <p><a class="btn btn-primary btn-lg" href="whatiscs.php" role="button">Learn more</a></p>
        </span>
</section>

<section class="parallax-middle">
    <div class="caption-middle">
        <span class="border-middle">
            <h2>News &amp; Promotions</h2>
            <h4>Find out what is going on around the world</h4>
            <p><a class="btn btn-primary btn-lg" href="news.php" role="button">Latest</a></p>
        </span>
    </div>
</section>

<section class="box">
    <span class="border">
            <h2>Our Authors</h2>
            <p>Find out their stories and experiences and how they can help enrich your travels.</p>
            <p><a class="btn btn-primary btn-lg" href="authors.php" role="button">About them</a></p>
        </span>
</section>

<section class="parallax-bottom">
    <div class="caption-bottom">
        <span class="border-bottom">
            <h2>We would love to hear from you</h2>
            <h4>Idea for the next book, let us know what you think of Culture Smart.</h4>
            <p><a class="btn btn-primary btn-lg" href="contact.php" role="button">Get in touch</a></p>
        </span>
    </div>
</section>

CSS：

.parallax-top {
  background-image: url("../images/hero3.jpg");  
  height: 1200px;
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
}

.main .caption {  
    position: absolute;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    color: white;
    background-color: black;
    opacity: 0.75;
    height: auto;
    padding: 0;
}

.main .caption h1 {
  margin-top: 0px;
}

.main .caption p {
  width: 80%;
  margin: auto;
  margin-bottom: 10px;
}


.parallax-middle {
  background-image: url("../images/hero1.jpg"); 
  height: 1200px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.caption-middle {  
    position: relative;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    color: white;
    font-size: 20px;
    background-color: black;
    opacity: 0.75;
    height: auto;
    padding: 1%;
}

.parallax-bottom {
  background-image: url("../images/hero2.jpg"); 
  height: 1200px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.caption-bottom {  
    position: relative;
    left: 0;
    top: 40%;
    width: 100%;
    text-align: center;
    color: white;
     background-color: black;
    opacity: 0.75;
    padding: 1%;
    height: auto;
}

当在移动设备上显示此图像时，图像会直接缩放，因此我看不到它们是什么。更改为“background-attachment：scroll;”解决了这个问题，但我失去了对计算机的视差效果。有没有办法在手机上自动调整背景图片大小？我不介意在移动设备上丢失视差效果

Answer 1

您的div的高度可能是问题，您是否尝试使用媒体查询调整移动设备或者背景大小：在移动设备上包含？

背景图片没有在手机/ iPhone上调整大小

1 个答案: