Question

我在rails 4 app中使用bootstrap。

我已经放弃尝试将引导程序轮播集成到我的页面中。（它将我的文本推送到下一个容器，并且不会使用我的样式调整图像大小。）

我有两张背景图片。我的目标是让这些页面从加载页面开始旋转到计时器上。

我的css有一个背景图片，顶部有文字，背景图片下半部分顶部有一个黑暗背景，因此文字更清晰可读。我不希望文本在背景图像发生变化时发生变化。

我有以下css和html。我试图使用人们为各种事件设置的js，但没有任何东西可以用于这种结构。

有谁知道如何替换背景图片？

HTML：

<div class= "containerfluid">
  <div class="collagecontainer">
    <div class="row">
      <div class="col-md-12">
        <div class= "row">
          <div class="col-md-12"> 
            <div class="module">
              <header>
                <h1 style="letter-spacing:2px"><br><br><br>Constant header remains the same</h1>
                <h3>constant tagline remains the same</h3>
                </header>
              </div>
            </div>
          </div>
        </div>  
      </div>
    </div>
  </div>

CSS：

.module {
  background: image-url('glowc.jpg');
  background-color: black;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  width: 100%;
  min-height: 600px;
  position: relative;
  overflow: hidden;
  margin: 0px;
}

.module > header {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px 10px;
  background: inherit;
  background-attachment: fixed;
  overflow: hidden;
}
.module > header::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 0;
  width: 200%;
  height: 200%;
  background-color: black;
  opacity: 0.6;
  background-attachment: fixed;
  -webkit-filter: blur(4px) ;
  filter: blur(4px) ;
}
.module > header::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.25)
}
.module > header > h1 {
  margin: 0;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 50px;
  position: relative;
  z-index: 1;
}

.module > header > h3 {
  margin: 0;
  padding-left:15%;
  padding-right:15%;
  padding-top:20px;
  color: white;
  font-family: 'Quicksand', sans-serif;
  font-size: 25px;
  color:#E8DA0C;
  position: relative;
  z-index: 1;
}

* {
  box-sizing: border-box;
}

我想让.module中的背景图像在glowc.jpg和glowp.jpg之间交替。其余的都应该保持不变。

JS：

我试图解决这个问题。我已达到这一点，但却迷茫和迷茫。

var images = [
do i put my alternate image here?
 ];

 var index = 0;

 setInterval(change_up, 1000);

 function change_up(){

     index = (index + 1 < images.length) ? index + 1 : 0;

   $('.block').fadeOut(300, function(){

     $(this).css('background-image', 'url('+ images[index] + ')')

     $(this).fadeIn(300);

   });
 }

Answer 1

您只需设置图片的类和网址。

DEMO https://jsfiddle.net/maxlipsky/ua337onq/1/

var images = [
"http://upload.wikimedia.org/wikipedia/ru/a/a6/Bender_Rodriguez.png", "http://theinfosphere.org/images/thumb/4/43/Bender.png/180px-Bender.png"
 ];

 var index = 0;

 setInterval(change_up, 2000);

 function change_up(){

     index = (index + 1 < images.length) ? index + 1 : 0;

   $('.module').fadeOut(300, function(){

     $(this).css('background-image', 'url('+ images[index] + ')')

     $(this).fadeIn(300);

   });
 }

负载交替背景图像

1 个答案: