Question

很抱歉，我的英语很差......我会试着说清楚。

我开发了一个固定背景图片的网站。显然背景位置：固定不适用于手机和IPAD！所以我已经成功解决了问题，你可以在我的代码中看到，（图片显示宽度和高度100％在后台）在这里：

  <body>
    <div class="container-fluid no-marge img-responsive"> 

    <img  src="crayons.jpg" class="bg-img" alt="">    

    <div class="rowtitle col-md-12 outline">
      <h1>title</h1>
    </div>
        <h1 class="col-md-12 titre-accueil">Bienvenue</h1>
        <div class="row col-md-12 carousel-space">

        </div>      
        <div class="row ">
            <div class="col-md-12 textePresentation ">
                <div class="col-md-offset-1 col-md-10 col-md-offset-1 ">
                    <h1 class="titre-qsn"><br>Qui sommes nous ?</h1><br><br><br>
                    <div class="col-md-4 "><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates error libero repellendus ullam, deserunt vitae sint obcaecati asperiores, maiores culpa optio assumenda, mollitia repellat doloribus porro? A vel, quam totam!</p>       <p>Lorem ibus porro? A vel, quam totam!</p>     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates error libero repellendus ullam, deserunt vitae sint obcaecati asperiores, maiores culpa optio assumenda, mollitia repellat doloribus porro? A vel, quam totam!</p>  <br><br>
                    </div>
                    <div class="col-md-4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates error libero repellendus ullam, deserunt vitae sint obcaecati asperiores, maiores culpa optio assumenda, mollitia repellat doloribus porro? A vel, quam totam!</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates error libero repellendus ullam, deserunt vitae sint obcaecati asperiores, maiores culpa optio assumenda, mollitia repellat doloribus porro? A vel, quam totam!</p>      <p>tetur adipisicing elit. Voluptates error libero repellendus ullam, deserunt vitae sint obcaecati asperiores, maiores culpa optio assumenda, mollitia repellat doloribus porro? A vel, quam totam!</p><br><br>
                    </div>
                    <div class="col-md-4"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates error libero repellendus ullam, deserunt vitae sint obcaecati asperiores, maiores culpa optio assumenda, mollitia repellat doloribus porro? A vel, quam totam!</p>        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates error libero repellendus ullam, deserunt vitae sint obcaecati asperiores, maiores culpa optio assumenda, mollitia repellat doloribus porro? A vel, quam totam!</p><br><br>
                    </div>
                </div>  
            </div>
        </div>

        <div id="footer" class="row footer col-lg-12 no-marge "><br>

        </div> 
    </div><!--container-fluid-->

</body>

和css：

html
{
    height: 100%;
    width:100%;
}


body
{
 /* content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: -10;
  background: url('crayons.jpg') no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;*/
}

.rowtitle
{
  background-color: red;
}

.bg-img
{
  position: fixed; 
  top: 0; 
  left: 0; 
  min-width: 100%;
  min-height: 100%;
  background: url('crayons.jpg');
  background-size: cover;
}


.titre-accueil
{
    margin-top: 50px;
    margin-bottom: 50px;
    width:100%;
    font-size: 3.8em;
    text-shadow: -1px -1px #eee, 1px 1px #888, -3px 0 4px #000;
    font-family:"Segoe print", Arial, Helvetica, sans-serif;
    color:white;
    font-weight:lighter;
    text-align:center;
    display:inline;
 }

.bandeau-carousel
{
    border: 35px solid rgba(255, 255, 255, .3);
    border-radius: 10px;
    padding: 0;
}


.textePresentation
{
    margin-top: 50px;
    width : 100%;
    background-color: rgb(235, 235, 235);
    box-shadow: 8px 8px 12px #aaa;
}

.carousel-space
{
    width:100%;
    height: 250px;
}

.footer
{
    /*padding-top: 50px;*/
    height: 200px;
    background-color: rgb(255, 73, 53);
    text-align: center;
    vertical-align: middle;
    margin: auto;
    position: relative;
}

.no-marge
{
    margin:0;
    padding:0;
}

.outline
{
  border: solid 3px red;
}

问题在于，当我向下滚动顶部菜单（导航栏和标题）时，我们会看到背景。我希望背景不要超过。

我认为使用屏幕截图会更好： illustration

也许有人有解决方案来解决这个问题？或者只是改善用户体验。

非常感谢！

Answer 1

试试这个：

  body{
    background-image: url('crayons.jpg');
    background-size: cover;
    background-repeat:no-repeat;
    background-position: center; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
    }

你也可以通过* /注释掉（禁用）你的身体css代码显示块将其设置为块元素，并使主体休闲容器规则而不是整页主体规则。

Answer 2

对于这种情况，我们有媒体查询，这将有很大帮助。这仅适用于ipad横向模式。我没有对代码进行过测试，但你可以在{ }

中使用样式

@media only screen 
        and (min-device-width : 768px) 
        and (max-device-width : 1024px) 
        and (orientation : landscape)
        and (-webkit-min-device-pixel-ratio: 1)  { 
              width: 100%;
              height: 100%;
              max-width: 800px;
              max-height: 600px; 
    }

在手机上固定背景位置的麻烦

2 个答案: