固定背景图像上的文本和图像滑块答案

【问题标题】：Text and Image Slider over a fixed background image固定背景图像上的文本和图像滑块
【发布时间】：2017-01-07 05:32:25
【问题描述】：

目前，我正在使用 Materializecss 图像滑块。其实我想要的是保持一个固定的全屏背景图像，文本和图像在固定的背景图像中滑动。

目前，我将滑块类的背景颜色设置为透明，但它不起作用。

$(document).ready(function(){
  $('.slider').slider();
});

 section {
   background: url('http://lorempixel.com/580/250/nature/4') center center no-repeat;
  background-size: cover;
}


.slider .slides {
 background-color: rgba(255,255,255,0);
  margin: 0;
  height: 400px;
}

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Materialize slider</title>

      <link rel="stylesheet" href="css/style.css">
      <link rel="stylesheet" href="css/materialize.css">


  
</head>

<body>
  <section>
   <div class="slider">
    <ul class="slides">
      <li>
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
       
        <div class="caption left-align">
          <h3>Left Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        
        <div class="caption right-align">
          <h3>Right Aligned Caption</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
      <li>
        <div class="caption center-align">
          <h3>This is our big Tagline!</h3>
          <h5 class="light grey-text text-lighten-3">Here's our small slogan.</h5>
        </div>
      </li>
    </ul>
  </div>
  </section>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.96.1/js/materialize.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

【问题讨论】：

您的问题不清楚。如果你试着把你试图解决的和你面临的问题分开会更好。
我想要一个带有固定背景图像和文本和图标的滑块。

标签： javascript html css slider materialize

【解决方案1】：

终于，我找到了问题的答案。

function step(n){
 //$(".content-switcher").hide();
  if(n==1){
    $(".content-switcher").animate({
      "left":"-600px"
    },"slow");
  } else if(n==2){
    $(".content-switcher").animate({
      "left":"-1200px"
    },"slow");
  } else if(n==3){
    $(".content-switcher").animate({
      "left":"0px"
    },"slow");
  }
}

.container{
  width: 600px;
  margin: 0 auto;
  outline:1px solid red;
  overflow: hidden;
  background-image: url("https://static.vecteezy.com/system/resources/previews/000/093/696/original/vector-yellow-abstract-background.jpg");
}
.slider{ width: 1800px;}
.content-switcher{
  width: 600px;
  float: left;
  position: relative;
  top:0;
  left: 0;
}

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Simple Content Slider</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="container">
  <a href="#" onclick="step(1); return false;" style="color: #fff">Step 1</a>
  <a href="#" onclick="step(2); return false;" style="color: #fff">Step 2</a>
  <a href="#" onclick="step(3); return false;" style="color: #fff">Step 3</a>
  <div class="slider">
  <div class="content-switcher" id="content1">
    <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit
      . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
      <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437">
       <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit
      . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
      <img src="http://vignette4.wikia.nocookie.net/mrmen/images/5/52/Small.gif/revision/latest?cb=20100731114437">
       <p>1Lorem ipsum dolor sit amet, consectetur adipisicing elit
      . Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
  </div>
  <div class="content-switcher" id="content2">
    <img src="http://images2.fanpop.com/image/user_images/Starmight350-808191_384_377.jpg">
    <p>2Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
  </div>
  <div class="content-switcher" id="content3">
    <p>3Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe sint enim autem beatae sunt distinctio fugiat facilis accusamus dolorum labore quis natus culpa laudantium eos consequatur excepturi rerum error velit.</p>
  </div>
    </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

    <script src="js/index.js"></script>

</body>
</html>

【讨论】：

【解决方案2】：

如果您处理 section 的 style 属性中的引用问题，似乎可以工作。如果您在style="" 中使用双引号，那么您不能在这些双引号中使用双引号。因此，您需要删除该属性中的双引号或用单引号替换它们。 rgba(255,255,255,0) 也是一种透明的方法，但更简单的方法是使用transparent - 但更简单的方法是完全删除该行，因为默认情况下没有背景，所以它是透明的。这是一个工作演示 - http://codepen.io/anon/pen/MJwOBR

【讨论】：

它工作正常，但问题是我应该如何将一张图片滑过固定的背景图片。

【解决方案3】：

您可以使用覆盖类的 div 并在整个图像上设置覆盖 div，如下所示：

在<section> tag之后添加div，取类名为class="overlay"

<div class="overlay"></div>

添加一些 CSS 以在图像上设置覆盖 div

 .overlay
   {    
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.17);
   }

并添加CSS以正确显示文本

.caption {
position: relative;
z-index: 99;
}

试试这个。

【讨论】：