Question

我已经搜索了一段时间，试图找到一个有效的解决方案，并且已经尝试了我所尝试的所有内容。我仍然非常擅长编码，并使用bootstrap构建了一个站点。无论我怎么做，背景图像都无法在物理移动设备上正确呈现，它们可以在缩小我的笔记本电脑上的浏览器但不在iPhone上缩小时完美扩展。我已将我的代码放在下面，非常感谢所有帮助！

{% block content %}  
<div class="bg">
    <div class="row"> 
        <div class="container-fluid">
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4"></div>
            <div class="col-xs-6 col-md-4 text-center">
                <div class="copy">
                <div class="box">  
                <h2 class="heading">A Captain For Every Occasion</h2>
                    <p>Our fleet of licensed captains are here to help you every step of the way. From lessons to first time boat owners to a delivery down the coast or the great lakes, we've experienced it all before.  In 2015 our team of captains logged over 10,000 nautical miles spanning from Canada to the Bahamas. </p>
                    <p>Our captains hail from New York, Rhode Island, Maryland, and Florida, covering all the major ports along the east coast.</p>  
                <h3 class="heading text-center">Services Offered</h3>
                    <ul class="text-left">
                        <li><i>New boat deliveries</i>: did you just purchase a brand new or new to you boat and need a hand getting her back to her new home port? Our team will hop on board and make sure your new yacht makes it home safely.</li>
                        <li><i>Lessons</i>: are you entirely new to boating or have you just moved into a larger boat with more systems in it than you're used to? Let us show you the ropes and walk you through the boat, making sure you feel comfortable with her. We can teach you how to anchor, dock, &amp; trim the boat out properly. </li>
                        <li><i>Coastal deliveries</i>: our team is no stranger to the Florida pilgrimage from up north. We know both the ocean way and how to make it down via the ICW if the weather is not cooperating outside. </li>
                        <li><i>Daily trips</i>: do you plan on heading out for the day or an evening of dinner and drinks onboard your boat and want to partake in the party? Let one of our captains hop on board with you, so you can enjoy yourself.</li>
                    </ul>  
                </div>  
               </div>    
            </div>   
      </div>    
    </div> 
</div>
{% endblock %}

我的CSS

.bg {
    font-family: "metricweb-light", sans-serif;
    font-size: 16px;
    background: url("../image/captain.jpg") center center no-repeat fixed;
    padding: -15px;
    margin: -15px;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    overflow: hidden;
}
.copy {
    padding-top: 50px;
    padding-bottom: 50px;
}
.box {
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .6);
    min-width: 300px;    
}

Answer 1

如何尝试在.bg上添加高度，例如300px，然后添加background-position: 50% 50%;

背景图像使用bootstrap重新调整移动设备上的问题

1 个答案: