Текст и изображение слайдера на фиксированном фоновом изображении

В настоящее время я работаю с ползунком изображений 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>

источник

2017-01-07 Shinoy Shaji

ваш вопрос не ясен. Было бы лучше, если бы вы попытались отделить то, что вы пытались решить, и с какими проблемами вы столкнулись. – Rahul

Я хочу слайдер с фиксированным bg-изображением, а текст и значки должны скользить по нему. –

Наконец, я нашел Ответ на свой вопрос.

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>

источник

2017-01-07 06:40:57

Кажется работать, если вы позаботитесь о проблеме цитатой в style атрибуте section «s. Если вы используете двойные кавычки с style="", вы не можете иметь двойные кавычки в этих двойных кавычках. Поэтому вам нужно удалить двойные кавычки внутри этого атрибута или заменить их одинарными кавычками. Также rgba(255,255,255,0) - это один из способов сделать прозрачность, но проще использовать transparent, но еще проще - просто удалить эту строку целиком, потому что по умолчанию фона нет, поэтому он прозрачен. Вот рабочая демонстрация - http://codepen.io/anon/pen/MJwOBR

источник

2017-01-07 05:53:24

он работает, но проблема в том, как я должен помещать одно изображение поверх фиксированного фонового изображения. –

Текст и изображение слайдера на фиксированном фоновом изображении

ответ

Смежные вопросы