如何根据div分配固定的背景图像？

时间：2016-05-10 07:52:26

标签： html css twitter-bootstrap twitter-bootstrap-3

我在使用bootstrap制作的网站旋转木马中使用了固定的背景图像。固定背景图像以显示平行效果。但问题是，当新的幻灯片向左移动时，已存在的图像仍保持固定状态。我想要的是当div与css过渡效果一起移动时，div上的背景图像会移动。

我想要这种类型的轮播http://www.w3schools.com/bootstrap/bootstrap_carousel.asp换句话说，我希望next item将active item的背景图片向左推。目前，当next item向左滑动时，它会隐藏current item的背景图片。

代码如下：

＆＃13;
＆＃13; 
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
  mylogo.innerHTML = "SSR";
}

function changelogo() {
  return function() {
    if (mq.matches) {

      mylogo.innerHTML = "SSR";
    } else {
      mylogo.innerHTML = "Syco Scientist Records"
    }
  }
}

window.onresize = changelogo();

if (window.matchMedia("(max-height: 420px)").matches) {
  for (var n = 0; n < 5; n++) {
    document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
  }
}
＆＃13; 
.navbar {
  min-height: 60px;
  border-color: #333;
  background-color: #d6d5d5;
  margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
  height: 60px;
  padding: 20px 15px;
  color: #333;
  font-family: Raleway;
  font-weight: bold;
  font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
  margin-top: 14px;
  border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
  background-color: #333;
}
.navbar ul.navbar-nav {
  margin-bottom: 0;
}
.navbar ul.nav > li > a {
  height: 60px;
  font-size: 14px;
  line-height: 20px;
  padding: 20px 15px;
  color: #333;
  text-align: center;
}
.navbar ul.nav > li > a:hover {
  color: #333;
  background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
  background-color: #333;
  color: #d6d5d5;
}
#home {
  background-color: #333;
  z-index: 6;
}
.carousel {
  width: 100%;
  height: 100vh;
  min-height: 420px;
}
.mobile-carousel {
  padding-top: 100px;
  height: 100%;
  padding-bottom: 40px;
}
.carousel-inner {
  height: 100%;
}
.carousel-inner .item {
  height: 100%;
  -webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
  transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
  display: block;
  width: 100%;
  height: 568px;
  height: 100%;
}
.carousel-inner .first {
  width: 100%;
  margin: auto;
  background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
}
.carousel-inner .second {
  width: 100%;
  margin: auto;
  background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
}
.carousel-inner .third {
  width: 100%;
  margin: auto;
  background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
}
.carousel-inner .fourth {
  width: 100%;
  margin: auto;
  background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
}
.carousel-control span {
  left: 50%;
  position: absolute;
  top: 50%;
}
.carousel-control span img {
  position: absolute;
  top: -36px;
  left: -9px;
}
.carousel-indicators {
  bottom: 0px;
  margin-bottom: 0;
}
.carousel-indicators li {
  background-color: #777;
  border: 0;
}
.carousel-indicators li.active {
  background-color: #dcdbdb;
  margin: 1px;
  width: 10px;
  height: 10px;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Syco Scientist Records</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/mystyle.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->


</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

      <div class="navbar-header">
        <a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
        <button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
          <span class="sr-only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#artists">Artists</a>
          </li>
          <li><a href="#songs">Songs</a>
          </li>
          <li><a href="#beats">Beats</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>


  <section id="home">
    <div id="mycarousel" class="carousel slide">
      <div class="container-fluid mobile-carousel">
        <div class="carousel-inner">

          <ol class="carousel-indicators">
            <li data-target="#mycarousel" data-slide-to="0"></li>
            <li data-target="#mycarousel" data-slide-to="1"></li>
            <li data-target="#mycarousel" data-slide-to="2"></li>
            <li data-target="#mycarousel" data-slide-to="3"></li>
          </ol>

          <div class="item active first"></div>
          <div class="item second"></div>
          <div class="item third"></div>
          <div class="item fourth"></div>

          <a href="#mycarousel" class="left carousel-control" data-slide="prev">
            <span aria-hidden="true"><img src="images/left_Arrow.png"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a href="#mycarousel" class="right carousel-control" data-slide="next">
            <span aria-hidden="true"><img src="images/right_arrow.png"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

我如何实现这一目标？

编辑：好像问题只出在firefox浏览器中。请解释为什么它在Chrome浏览器中工作，而不是在Firefox浏览器中。

4 个答案:

答案 0 :(得分：1)

我试过这样的。旋转木马下一个项目将显示在上一个项目之后，活动项目的背景图像在左侧

var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
  mylogo.innerHTML = "SSR";
}

function changelogo() {
  return function() {
    if (mq.matches) {

      mylogo.innerHTML = "SSR";
    } else {
      mylogo.innerHTML = "Syco Scientist Records"
    }
  }
}

window.onresize = changelogo();

if (window.matchMedia("(max-height: 420px)").matches) {
  for (var n = 0; n < 5; n++) {
    document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
  }
}
.navbar {
  min-height: 60px;
  border-color: #333;
  background-color: #d6d5d5;
  margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
  height: 60px;
  padding: 20px 15px;
  color: #333;
  font-family: Raleway;
  font-weight: bold;
  font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
  margin-top: 14px;
  border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
  background-color: #333;
}
.navbar ul.navbar-nav {
  margin-bottom: 0;
}
.navbar ul.nav > li > a {
  height: 60px;
  font-size: 14px;
  line-height: 20px;
  padding: 20px 15px;
  color: #333;
  text-align: center;
}
.navbar ul.nav > li > a:hover {
  color: #333;
  background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
  background-color: #333;
  color: #d6d5d5;
}
#home {
  background-color: #333;
  z-index: 6;
}
.carousel {
  width: 100%;
  height: 100vh;
  min-height: 420px;
}
.mobile-carousel {
  padding-top: 100px;
  height: 100%;
  padding-bottom: 40px;
}
.carousel-inner {
  height: 100%;
}
.carousel-inner .item {
  height: 100%;
  -webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
  transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
  display: block;
  width: 100%;
  height: 568px;
  height: 100%;
}
.carousel-inner .first {
  width: 100%;
  margin: auto;
  background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
  backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .second {
  width: 100%;
  margin: auto;
  background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
  backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .third {
  width: 100%;
  margin: auto;
  background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
 backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-inner .fourth {
  width: 100%;
  margin: auto;
  background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
  backface-visibility: visible !important;
-webkit-backface-visibility: visible !important;
transform: none !important;
-webkit-transform: none !important;
}
.carousel-control span {
  left: 50%;
  position: absolute;
  top: 50%;
}
.carousel-control span img {
  position: absolute;
  top: -36px;
  left: -9px;
}
.carousel-indicators {
  bottom: 0px;
  margin-bottom: 0;
}
.carousel-indicators li {
  background-color: #777;
  border: 0;
}
.carousel-indicators li.active {
  background-color: #dcdbdb;
  margin: 1px;
  width: 10px;
  height: 10px;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Syco Scientist Records</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/mystyle.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->


</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

      <div class="navbar-header">
        <a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
        <button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
          <span class="sr-only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#artists">Artists</a>
          </li>
          <li><a href="#songs">Songs</a>
          </li>
          <li><a href="#beats">Beats</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>


  <section id="home">
    <div id="mycarousel" class="carousel slide">
      <div class="container-fluid mobile-carousel">
        <div class="carousel-inner">

          <ol class="carousel-indicators">
            <li data-target="#mycarousel" data-slide-to="0"></li>
            <li data-target="#mycarousel" data-slide-to="1"></li>
            <li data-target="#mycarousel" data-slide-to="2"></li>
            <li data-target="#mycarousel" data-slide-to="3"></li>
          </ol>

          <div class="item active first"></div>
          <div class="item second"></div>
          <div class="item third"></div>
          <div class="item fourth"></div>

          <a href="#mycarousel" class="left carousel-control" data-slide="prev">
            <span aria-hidden="true"><img src="images/left_Arrow.png"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a href="#mycarousel" class="right carousel-control" data-slide="next">
            <span aria-hidden="true"><img src="images/right_arrow.png"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  
</body>

</html>

答案 1 :(得分：1)

你可以添加这个css：

<!DOCTYPE html>


<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Syco Scientist Records</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="css/mystyle.css">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

    <style>
        div#mycarousel .carousel-inner .item{
            padding:0 10%;
        }
    </style>
</head>

<body>

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">

            <div class="navbar-header">
                <a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
                <button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
                    <span class="sr-only"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
            </div>

            <div id="navbar" class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a>
                    </li>
                    <li><a href="#artists">Artists</a>
                    </li>
                    <li><a href="#songs">Songs</a>
                    </li>
                    <li><a href="#beats">Beats</a>
                    </li>
                    <li><a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>


    <section id="home">
        <div id="mycarousel" class="carousel slide">
            <div class="container-fluid mobile-carousel">
                <div class="carousel-inner">

                    <ol class="carousel-indicators">
                        <li data-target="#mycarousel" data-slide-to="0"></li>
                        <li data-target="#mycarousel" data-slide-to="1"></li>
                        <li data-target="#mycarousel" data-slide-to="2"></li>
                        <li data-target="#mycarousel" data-slide-to="3"></li>
                    </ol>

                    <div class="item active first"><img src="http://blog.allisonjoyce.com/wp-content/uploads/2014/02/ablog186.jpg"></div>
                    <div class="item second"><img src="https://i.ytimg.com/vi/MLqHuAXasTY/maxresdefault.jpg"></div>
                    <div class="item third"><img src="http://blog.allisonjoyce.com/wp-content/uploads/2014/02/ablog186.jpg"></div>
                    <div class="item fourth"><img src=""><img src="http://www.monopolycity.com/acimages/ac_beach_21_560.gif"></div>

                    <a href="#mycarousel" class="left carousel-control" data-slide="prev">
                        <span aria-hidden="true"><i class="glyphicon glyphicon-chevron-left"></i></span>
                    </a>
                    <a href="#mycarousel" class="right carousel-control" data-slide="next">
                        <span aria-hidden="true"><i class="glyphicon glyphicon-chevron-right"></i></span>
                    </a>
                </div>
            </div>
        </div>
    </section>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

</body>

答案 2 :(得分：0)

  

但问题是什么时候新的幻灯片   carouslel向左移动已存在的图像仍然固定。   我想要的是div上的背景图像在div时移动   随着css过渡效应而移动。

在Chrome中 - 您提供的演示已经按照您的需要运行。

但在FireFox中可以看到问题。问题是因为您在图像上使用修复来保持修复，在Firefox中也可以根据需要删除它。

background: url(..) no-repeat fixed;    // remove fixed

编辑1：正如您所说，删除fixed会破坏视差效果，您可以这样做。

在.item div中添加另一个div并将图像添加到此div。所以现在我们有一个带有固定图像的内部div，但是外部div可以自由移动。

以下是工作样本

＆＃13;
＆＃13; 
var mq = window.matchMedia("(max-width: 320px)");
var mylogo = document.getElementById("mylogo");
if (mq.matches) {
  mylogo.innerHTML = "SSR";
}

function changelogo() {
  return function() {
    if (mq.matches) {

      mylogo.innerHTML = "SSR";
    } else {
      mylogo.innerHTML = "Syco Scientist Records"
    }
  }
}

window.onresize = changelogo();

if (window.matchMedia("(max-height: 420px)").matches) {
  for (var n = 0; n < 5; n++) {
    document.getElementsByClassName("item")[n].style.backgroundSize = "100% calc(100% - 140px)";
  }
}
＆＃13; 
.navbar {
  min-height: 60px;
  border-color: #333;
  background-color: #d6d5d5;
  margin-bottom: 0;
}
.navbar .navbar-header .navbar-brand {
  height: 60px;
  padding: 20px 15px;
  color: #333;
  font-family: Raleway;
  font-weight: bold;
  font-style: italic;
}
.navbar .navbar-header .navbar-toggle {
  margin-top: 14px;
  border-color: #d5d5d5;
}
.navbar .navbar-header .navbar-toggle > .icon-bar {
  background-color: #333;
}
.navbar ul.navbar-nav {
  margin-bottom: 0;
}
.navbar ul.nav > li > a {
  height: 60px;
  font-size: 14px;
  line-height: 20px;
  padding: 20px 15px;
  color: #333;
  text-align: center;
}
.navbar ul.nav > li > a:hover {
  color: #333;
  background-color: #e7e7e7;
}
.navbar ul.nav > li.active > a,
.navbar ul.nav > li.active:hover > a {
  background-color: #333;
  color: #d6d5d5;
}
#home {
  background-color: #333;
  z-index: 6;
}
.carousel {
  width: 100%;
  height: 100vh;
  min-height: 420px;
}
.mobile-carousel {
  padding-top: 100px;
  height: 100%;
  padding-bottom: 40px;
}
.carousel-inner {
  height: 100%;
}
.carousel-inner .item, .carousel-inner .item > div {
  height: 100%;
  -webkit-transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
  transition-timing-function: cubic-bezier(.71, -0.06, .36, 1.35);
}
.carousel-inner .item img {
  display: block;
  width: 100%;
  height: 568px;
  height: 100%;
}
.carousel-inner .first > div {
  width: 100%;
  margin: auto;
  background: url(http://2.bp.blogspot.com/_OdCx7pACI9M/TQhDqhnKXgI/AAAAAAAAAH8/kPDpkHpFOnw/s1600/daffy+duck+cartoons+pictures+1.gif) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
}
.carousel-inner .second > div{
  width: 100%;
  margin: auto;
  background: url(http://www.allgraphics123.com/graphics/cartoons/cartoons123.gif) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
}
.carousel-inner .third > div{
  width: 100%;
  margin: auto;
  background: url(http://pic.1fotonin.com/data/wallpapers/211/WDF_2483525.png) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
}
.carousel-inner .fourth > div{
  width: 100%;
  margin: auto;
  background: url(http://pic.1fotonin.com/data/wallpapers/109/WDF_1525343.jpg) no-repeat fixed;
  background-position: center 100px;
  background-size: 100% calc(100% - 140px);
  background-clip: content-box;
}
.carousel-control span {
  left: 50%;
  position: absolute;
  top: 50%;
}
.carousel-control span img {
  position: absolute;
  top: -36px;
  left: -9px;
}
.carousel-indicators {
  bottom: 0px;
  margin-bottom: 0;
}
.carousel-indicators li {
  background-color: #777;
  border: 0;
}
.carousel-indicators li.active {
  background-color: #dcdbdb;
  margin: 1px;
  width: 10px;
  height: 10px;
}
＆＃13; 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Syco Scientist Records</title>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" href="css/mystyle.css">
  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->


</head>

<body>

  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">

      <div class="navbar-header">
        <a class="navbar-brand" href="#" id="mylogo"> Syco Sientist Records </a>
        <button class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse">
          <span class="sr-only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#">Home</a>
          </li>
          <li><a href="#artists">Artists</a>
          </li>
          <li><a href="#songs">Songs</a>
          </li>
          <li><a href="#beats">Beats</a>
          </li>
          <li><a href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>


  <section id="home">
    <div id="mycarousel" class="carousel slide">
      <div class="container-fluid mobile-carousel">
        <div class="carousel-inner">

          <ol class="carousel-indicators">
            <li data-target="#mycarousel" data-slide-to="0"></li>
            <li data-target="#mycarousel" data-slide-to="1"></li>
            <li data-target="#mycarousel" data-slide-to="2"></li>
            <li data-target="#mycarousel" data-slide-to="3"></li>
          </ol>

          <div class="item active first"><div></div></div>
          <div class="item second"><div></div></div>
          <div class="item third"><div></div></div>
          <div class="item fourth"><div></div></div>

          <a href="#mycarousel" class="left carousel-control" data-slide="prev">
            <span aria-hidden="true"><img src="images/left_Arrow.png"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a href="#mycarousel" class="right carousel-control" data-slide="next">
            <span aria-hidden="true"><img src="images/right_arrow.png"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </div>
    </div>
  </section>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
  
</body>

</html>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

source .bashrc

将图片的高度设置为background: url(../img/fav.jpg) no-repeat fixed; height: 500px; ，或者您可以使用heigth:500px;，否则在您在该特定div上写任何内容之前，它不会在背景上显示您的图像。

相关问题
最新问题