如何在bootstrap中幻灯片显示bg图像 [英] how to slideshow bg image in bootstrap

问题描述

 <  ！DOCTYPE     html  >  
 <   html     lang   =  zh >  
 <   head  >  
 <   meta     charset   =  UTF-8 < span class =code-attribute>   /  >  
 <   meta     http-equiv   =  X-UA兼容    content   =  IE = edge，chrome = 1 >  
 <   meta     name   =  viewport   内容  =  width = device-width，initial-scale = 1.0 >  
 <   title  > 登录表单<   / title  >  
 <   meta     name   =   description    content  < span class =code-keyword> = 使用CSS3自定义登录表单样式    /  >  
 <   meta     name   =  keywords < span class =code-attribute>   content   =  css3，login，form，custom，input，submit，button，html5，placeholder    /  >  
 <   meta    名称  = 作者   内容  =  Codrops    /  >  
 <   link     rel   = 快捷图标    href   =  ../ favicon .ico >  
 <   link     rel   =  stylesheet    type   =  text / css    href   =  css / style.css    /  >  
 <   script     src   =  js / modernizr.custom.63321.js >  <   /   script  >  
 
 <   style     type   =  text / css >  
  @ import  url（http： //   fonts.googleapis.com/ css？family = Raleway：400,700）;  
  body  {
 背景 ： ＃7f9b4e url（images / bg2.jpg）no-repeat中心顶部;  
   -  webkit-background-size  ： 封面;  
   -  moz-background-size  ： 封面;  
  background-size  ： 封面;  
} 
。 container  >   header   h1 ，
。容器 >   header   h2  {
 颜色 ：  #fff;  
  text-shadow  ：  0 1px 1px rgba（0,0,0 ，0.7）;  
} 
 
  body  {
  background-color  ：  #CCC;  
  margin  ：  80px 80px 100px 100px;  
} 
  div ＃ fixedheader  {
  position  ： 已修复;  
  top  ：  0px;  
  left  ：  0px;  
  width  ：  100％;  
  color  ： ＃C0C0C0;  
  background  ： ＃C0C0C0;  
 填充 ：  20px;  
} 
  div ＃ fixedfooter  {
  position  ： 已修复;  
  bottom  ：  0px;  
  left  ：  0px;  
  width  ：  100％;  
 颜色 ： ＃C0C0C0;  
  background  ： ＃C0C0C0;  
  padding  ：  8px;  
} 
 
 < /  样式 >  
 <   / head  >  
 <   body  >  
 <   div     class   = 容器 >  
 
 
 
 <   header  >  
 
 <   div     id   =  fixedheader >  <   / div  >  
 
 
 
 
 <   / header  >  
 
 <  部分   < span class =code-attribute> class   =  main >  
 <  表格    class   =  form-4 >  
 <   h1  > 登录或注册<   / h1  >  
 <   p  >  
 <   label     for   =  login > 用户名或电子邮件<   / label  > ;  
 <  输入    type   =  text    name   = 登录   占位符  = 用户名或电子邮件   必需 >  
 <   / p  >  
 <   p  >  
 <   label     for   = 密码 > 密码<   / label  >  
 <   input     type   =  password    name   =' 密码'   占位符  = 密码   必需 >  
 <   / p  >  
 
 <   p  >  
 <  输入    type   =  submit    name   = 提交    value   = 继续 >  
 <   / p  >  
 <   / form  >  
 < span class =code-keyword><   / section  >  
 
 <   / div  >  
 <   div     id   =  fixedfooter >  <   / div  >  
 <   / body  >  
 <   / html  >  

解决方案

在 body 标签后添加此标签

 <   div     id   =  myCa rousel    class   = 轮播容器幻灯片 >  
 < ;   div     class  < span class =code-keyword> =  carousel-inner >  
 <   div     class   = 有效第一项 >  <   / div  >  
 <   div     class   = 第二项 >  <   / div  >  
 <   div     class   = 第三项 >  <   / div  >  
 < span class =code-keyword><   / div  >  
 <   / div  >  

将此添加到 head

< style> 
。 carousel  { z-index  ：  -99; }  / *  保持这一点所有内容* /  
。 carousel 。 item  {
 < span class =code-attribute> position  ：  fixed;  
 < span class =code-attribute> width  ：  100％;   height  ：  100％;  
   -  webkit-transition  ： 不透明度1s;  
   -  moz-transition  ： < span class =code-keyword> opacity 1s;  
   -  ms-transition  ： 不透明度1s;  
   -  o-transition  ：  opacity 1s;  
  transition  ： 不透明度1s;  
 
} 
。 carousel 。一个 {
 背景  ：  url（assets / img / slide3blur.jpg）;  
  background-size  ： 封面;  
   -  moz-background -size  ： 封面;  
} 
。 carousel 。 two  {
 背景 ：  url（assets / img / slide2blur。 jpg）;  
  background-size  ： 封面;  
   -  moz-background-size  ： 封面;  
} 
。 carousel 。三 {
 背景 ：  url（assets / img / slide1blur.jpg）;  
  background-size  ： 封面;  
   -  moz-background-size  ： 封面;  
} 
。 carousel 。 active 。 left  {
  left  ：  0;  
  opacity  ：  0;  
  z-index  ：  2;  
} 
 < /   style  >  

并在正文结束之前添加此内容

< script type =   text / javascript> ; 

（<温泉n class =code-sdkkeyword> document ）。ready（ function （）{

（' .carousel'）。carousel（{interval： 7000 }）;
}）;
< / script>

在其他论坛发现，我不知道我可以在这里发布。

您可以在CSS中更改图像。

<!DOCTYPE html>
<html lang="en">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title> Login Form </title>
        <meta name="description" content="Custom Login Form Styling with CSS3" />
        <meta name="keywords" content="css3, login, form, custom, input, submit, button, html5, placeholder" />
        <meta name="author" content="Codrops" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/style.css" />
		<script src="js/modernizr.custom.63321.js"></script>
		
			<style type="text/css">
			@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);
			body {
				background: #7f9b4e url(images/bg2.jpg) no-repeat center top;
				-webkit-background-size: cover;
				-moz-background-size: cover;
				background-size: cover;
			}
			.container > header h1,
			.container > header h2 {
				color: #fff;
				text-shadow: 0 1px 1px rgba(0,0,0,0.7);
			}
			
body {
	background-color: #CCC;
	margin:80px 80px 100px 100px;
}
div#fixedheader {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	color:#C0C0C0;
	background:#C0C0C0;
	padding:20px;
}
div#fixedfooter {
	position:fixed;
	bottom:0px;
	left:0px;
	width:100%;
	color:#C0C0C0;
	background:#C0C0C0;
	padding:8px;
}

		</style>
    </head>
    <body>
        <div class="container">
		
			
			
			<header>
			
				<div id="fixedheader"></div>
				

				
				
			</header>
			
			<section class="main">
				<form class="form-4">
				    <h1>Login or Register</h1>
				    <p>
				        <label for="login">Username or email</label>
				        <input type="text" name="login" placeholder="Username or email" required>
				    </p>
				    <p>
				        <label for="password">Password</label>
				        <input type="password" name='password' placeholder="Password" required> 
				    </p>

				    <p>
				        <input type="submit" name="submit" value="Continue">
				    </p>       
				</form>​
			</section>
			
        </div>
		<div id="fixedfooter"></div>
    </body>
</html>

解决方案

Add this after body tag

<div id="myCarousel" class="carousel container slide">
<div class="carousel-inner">
        <div class="active item one"></div>
        <div class="item two"></div>
        <div class="item three"></div>
</div>
</div>

Add this to head

<style>
.carousel { z-index: -99; } /* keeps this behind all content */
.carousel .item {
    position: fixed; 
    width: 100%; height: 100%;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;

}
.carousel .one {
    background: url(assets/img/slide3blur.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .two {
    background: url(assets/img/slide2blur.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .three {
    background: url(assets/img/slide1blur.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .active.left {
    left:0;
    opacity:0;
    z-index:2;
}
</style>

And add this before body end

<script type="text/javascript">

(document).ready(function() {

('.carousel').carousel({interval: 7000}); }); </script>

Found at other forum, I don't know I can post it here.
You can change images in CSS.

这篇关于如何在bootstrap中幻灯片显示bg图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！