html - 如何为 div 分配固定的背景图像？

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

我在使用 bootstrap 制作的网站轮播中使用了固定的背景图片。固定背景图像以显示视差效果。但问题是，当轮播的新幻灯片向左移动时，已经存在的图像仍然固定。我想要的是当 div 移动时 div 上的背景图像随着 css 过渡效果移动。

我想要这种类型的轮播http://www.w3schools.com/bootstrap/bootstrap_carousel.asp换句话说，我希望 next item 将 active item 的背景图像推到左边。目前，当下一个元素向左滑动时，它会使当前元素的背景图像不透明。

代码如下:

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;
}
.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;
}
<!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>

我该如何实现？

编辑: 问题似乎只出现在 firefox 浏览器中。请解释为什么它适用于 chrome 浏览器而不适用于 firefox 浏览器。

最佳答案

我试过这样。旋转木马下一个元素将出现在前一个元素之后，左侧事件元素的背景图像

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>

关于html - 如何为 div 分配固定的背景图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37132366/

上一篇：javascript - 用于显示导航的动画网页

下一篇：javascript - 保存一部分html到本地存储稍后加载

相关文章：

javascript - 如何在 JavaScript 中做两个对称的矩形三 Angular 形

缩小时 HTML/CSS 会破坏 div

javascript - 在 JavaScript 上访问 DOM

HTML。单行中的列

html - 移动 CSS 上奇怪的导航按钮

html - 如何在 WordPress 主题中使用 BootStrap？

php - 使用 dirname 和 img src 在 apache 网络服务器上显示 Logo

javascript - 垂直菜单 css3

jquery - Twitter Bootstrap 模态将 html 内容推到左侧

css - 这个 CSS 的含义

©2024 IT工具网  联系我们