某些背景图片没有出现在移动设备的部分中？

时间：2015-11-02 04:50:26

标签： html image twitter-bootstrap mobile background

前几张背景图片出现在移动设备上，但最后一对未显示？

以下是实时链接：http://ryan-playground.com/cafe_neve_v2/

它在桌面上工作正常但在我的iphone和我的朋友galaxy上最后两个背景图像没有出现。所有的背景图像都具有相同的css样式，因此它们没有出现是没有意义的吗？

继承人html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Café Névé</title>
        <meta name="generator" content="Bootply" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/animate.min.css" type="text/css">
    <link rel="stylesheet" href="css/creative.css" type="text/css">
    <link rel='shortcut icon' href='img/favicon.ico' type='image/x-icon'/ >
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <link href="css/styles.css" rel="stylesheet">
    </head>
    <body data-spy="scroll" data-offset="50">

<nav id="mainNav" class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top"><!--Café Névé--></a>
                <div>
    <a href='https://www.facebook.com/Caf%C3%A9-N%C3%A9v%C3%A9-86198556375/' target='blank'><img class='facebooklink' src='img/blue_facebook.png'></a>
            <a  href='https://instagram.com/explore/locations/410052/' target='blank'><img class='instagramlink' src='img/blue_instagram.png'></a>
          </div>
            </div>


            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a class="page-scroll" href="#sec1">About</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#sec3">Rachel</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#sec4">Mile End</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#sec5">Stanley</a>
                    </li>
                    <li>
                        <a class="page-scroll" href="#sec6">Toronto</a>
                    </li>
                </ul>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container-fluid -->
    </nav>

<div class="header alt vert">
  <div class="container">

    <h1 id='topheader'> Café Névé

      <p class="lead"><img src='img/snowflake.png'></p></h1>
  </div>


<div id="sec1" class="blurb">
  <div class="container">
    <div class="row">
      <div class="col-md-7">
        <h1 id='who'>Who We Are</h1>
        <p class="lead"><!--The Most Popular Responsive Framework--></p>
      </div>

    </div>
  </div>
</div>
</div>

<div class="featurette" id="sec2">
  <div class="container">
    <div class="row">
      <div class="col-md-12 text-center">
       <!-- <h1>Amazing Features</h1> -->
      </div>
    </div>
    <div class="row">
      <div class="col-md-2 col-md-offset-2 text-center">
        <div class="featurette-item">
          <i class="icon-rocket"></i>
          <h4>Mission</h4>
          <p>Words we live by</p>
        </div>
      </div>
      <div class="col-md-2 text-center">
        <div class="featurette-item">
          <i class="icon-magnet"></i>
          <h4>History</h4>
          <p>Where we came from</p>
        </div>
      </div>
      <div class="col-md-2 text-center">
        <div class="featurette-item">
          <i class="icon-shield"></i>
          <h4>Source</h4>
          <p>What we brew and why</p>
        </div>
      </div>
      <div class="col-md-2 text-center">
        <div class="featurette-item">
          <i class="icon-pencil"></i>
          <h4>Retailers</h4>
          <p>Where you can get our coffee</p>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="callout" id="sec3">
  <div class="vert">
    <div class="col-md-12 text-center"><h2>RACHEL LOCATION</h2></div>
    <div class="col-md-12 text-center">&nbsp;</div>
    <div class="col-md-8 col-md-offset-2 text-center">

    </div>
  </div>
</div>

<div class="callout" id="sec4">
  <div class="vert">
    <div class="col-md-12 text-center"><h2>MILE END LOCATION</h2></div>
    <div class="col-md-12 text-center">&nbsp;</div>
    <div class="col-md-8 col-md-offset-2 text-center">

    </div>
  </div>
</div>

<div class="callout" id="sec5">
  <div class="vert">
    <div class="col-md-12 text-center"><h2>STANLEY LOCATION</h2></div>
    <div class="col-md-12 text-center">&nbsp;</div>
    <div class="col-md-8 col-md-offset-2 text-center">

    </div>
  </div>
</div>

<div class="callout" id="sec6">
  <div class="vert">
    <div class="col-md-12 text-center"><h2>TORONTO LOCATION</h2></div>
    <div class="col-md-12 text-center">&nbsp;</div>
    <div class="col-md-8 col-md-offset-2 text-center">

    </div>
  </div>
</div>



<div class="blurb bright">

  <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
        <h3>Founding Partners</h3>
        <br>
      </div>
  </div>

  <div class="row">
    <div class="col-sm-4 col-sm-offset-2">
         <div class="panel panel-default">
         <div class="panel-heading text-center"><h2> Luke</h2></div>
         <div class="panel-body text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
          dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
          Aliquam in felis si.

          </div>
         </div>
    </div>
    <div class="col-sm-4">
         <div class="panel panel-default">
         <div class="panel-heading text-center"><h2>Gabriel </h2></div>
         <div class="panel-body text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pharetra varius quam sit amet vulputate. 
          Quisque mauris augue, molestie tincidunt condimentum vitae, gravida a libero. Aenean sit amet felis 
          dolor, in sagittis nisi. Sed ac orci quis tortor imperdiet venenatis. Duis elementum auctor accumsan. 
          Aliquam in felis sit.



          </div>
         </div>
    </div>
  </div>
</div>
<!--
<div class="blurb">
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
        <h3>Sharing the Bootstrap Love</h3>
        <p class="lead"></p>
      </div>
    </div>
  </div>
</div>


<footer>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-3 text-center">
        <ul class="list-inline">
          <li><i class="icon-facebook icon-2x"></i></li>
          <li><i class="icon-twitter icon-2x"></i></li>
          <li><i class="icon-google-plus icon-2x"></i></li>
          <li><i class="icon-pinterest icon-2x"></i></li>
        </ul>
        <hr>
        <p>Built with <i class="icon-heart-empty"></i> at <a href="http://www.bootply.com">Bootply</a>.<br>Company ©2014</p>
      </div>
    </div>
  </div>
</footer>

<ul class="nav pull-right scroll-down">
  <li><a href="#" title="Scroll down"><i class="icon-chevron-down icon-3x"></i></a></li>
</ul>
<ul class="nav pull-right scroll-top">
  <li><a href="#" title="Scroll to top"><i class="icon-chevron-up icon-3x"></i></a></li>
</ul>-->

    <!-- script references -->
  <script src="js/jquery.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script src="js/scripts.js"></script>
    <script src="js/bootstrap.min.js"></script>
    </body>
</html>

继续css：

/* -- custom css for Bootstrap 3.x --*/

/* move special fonts to HTML head for better performance */
@import url(http://fonts.googleapis.com/css?family=Voltaire);

html,
body {
  height: 100%;
  width: 100%;
  font-family:Arial,sans-serif;
}

/* fix bs3 horizontal scrollbar bug */
.row { margin: 0; padding: 0 }


/* use special fonts in certain elements */
h1,h2,h3,h4,.lead,.btn,.navbar a {
  text-transform:uppercase;
  font-family:'Voltaire',Arial,sans-serif;
  letter-spacing:2px;
}

h1 {
  font-size:50px;
}

/* make images gray */
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.facebooklink{

 width:18px;
  height:auto;
  margin-top: 14px;
  position: absolute;
    margin-left: 15px;


}


.instagramlink{

 width:18px;
  height:auto;
  margin-top: 14px;
  position: absolute;
  margin-left: -10px;

}

.icon-bar {
   background-color:#fff;
}

.scroll-down a, .scroll-top a {
   color:#ffffff;
}

.scroll-down {
   position:fixed;
   bottom:20%;
   right:0%;
   color:#f9f9f9;
}

.scroll-top {
  background-color:#dbdbdb;
}

#sec1{}
#sec2{}
#sec3{

background: url('../img/1.jpg') no-repeat center center fixed; 

}

#sec4{

background: url('../img/3.jpg') no-repeat center center fixed; 

}


#sec5{

background: url('../img/4.jpg') no-repeat center center fixed; 

}

#sec6{

background: url('../img/6.jpg') no-repeat center center fixed; 

}

.vert {
  vertical-align: middle;
  width:100%;
  padding-top:4%;
  text-align:center;
}

.header .btn-lg {
   font-size:28px;
   border-color:#eeeeee;
   padding:15px;
   background-color:transparent;
   color:#ffffff;
}

.header .btn-lg:hover {
   background-color:#eeeeee;
   color:#777777;
}

.navbar a {
  color:#87d6fd;
  font-size:14px;
}

.navbar-bold.affix {
  background-color:#d46054;
}

.affix {
      top: 0;
      width: 100%;
  }

  .affix + .container-fluid {
      padding-top: 70px;
  }

.navbar-bold {
  background-color:#f68076;
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
}

.navbar-bold li a:hover, .navbar-bold li.active {
  background-color:#d46054;
}


.header h1 {
  font-size:60px;
  margin-top: 120px;
  color:rgba(255,255,255,1);
  margin-left:-5px;
  margin-bottom:5px;
  text-transform:uppercase;
}



.header .lead {
  color:#d46054;
  font-size:25px;
}

.header {
  height: 100%;
  background: #f68076 url('../img/2_blur.jpg') repeat center center fixed;
}

#navbar{


}

/* use alt in navbar and header for different color */

.alt {
  background-color: rgba(255,255,255,0.8);
}

.alt .lead {
  color: #3B0496;
}

.alt.affix {
  background-color:#4C06AB;
}

.alt li a:hover, .alt li.active {
  background-color:#5D17BA;
}

#topheader{



}



.blurb {

  padding: 120px 0;


}

.blurb .panel {

  background-color:transparent;
}

.bright {
  height: 100%;
  background:white; 
  color:#777;
}

#who{

margin-top: 200px;



}

.featurette {

  background: #fff;
  padding: 50px 0;
  color: rgba(1, 1, 1, 0.7);
}

.featurette-item {

  margin-top: 70px;
  margin-bottom: 15px;
}

.featurette-item > i {
  border: 3px solid #87d6fd;
  border-radius: 50%;
  display: inline-block;
  font-size: 56px;
  width: 140px;
  height: 140px;
  line-height: 136px;
  vertical-align: middle; 
  text-align: center;
}

.featurette-item > i:hover {
  font-size: 68px;
}

.callout {
  color: #ffffff;
  padding-top:7%;
  height: 100%;
  width: 100%;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.gallery {
  padding: 50px 0;
}

.call-to-action {
  background: #eeeeee;
  padding: 50px 0;
}

.call-to-action .btn {
  margin: 10px;
}

footer {
  padding: 100px 0;
}

/* -- end custom css for Bootstrap 3.x --*/

1 个答案:

答案 0 :(得分：0)

enter image description here http://ami.responsivedesign.is/ 你好，朋友， 您的网站正在运行所有设备（所有图像都显示在移动设备和桌面设备上）...请在上面链接检查您的网站...

相关问题
最新问题