在固定的背景图像上的文本和图像滑块
[英]Text and Image Slider over a fixed background image
问题描述
目前，我正在使用Materialisecss图像滑块。 实际上我想要的是保持一个固定的全屏背景图像，文本和图像滑过固定的背景图像。
现在，我将滑块类的背景颜色设置为透明，但它不起作用。
$(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>
3 个解决方案
解决方案1
2 已采纳 2017-01-07 06:40:57
最后，我找到了我的问题的答案。
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
1 2017-01-07 05:53:24
如果您在section的style属性中处理引用问题，似乎可以工作。 如果你使用带有style=""双引号，那么你不能在这些双引号中使用双引号。 因此，您需要删除该属性中的双引号或用单引号替换它们。 另外rgba(255,255,255,0)是一种做透明度的方法，但更简单的方法是使用transparent - 但更简单的方法就是完全删除该行，因为默认情况下没有背景，所以它是透明的。 这是一个工作演示 - http://codepen.io/anon/pen/MJwOBR
解决方案3
1 2018-08-07 05:49:50
你可以使用覆盖类的div，并在整个图像上设置叠加div，如下所示：
在<section> tag后添加div将类名作为class="overlay"
<div class="overlay"></div>
在图像上为set overlay div添加一些CSS
.overlay
{
position: absolute;
height: 100%;
width: 100%;
background-color: rgba(255, 255, 255, 0.17);
}
并正确添加CSS用于显示文本
.caption {
position: relative;
z-index: 99;
}
试试这个。
iDangerous Slider在图像上显示文本
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.