我正在使用最新的 Bootstrap V 3.3.2，基本上我正在尝试创建一个旋转木马(我已经完成了)，但我想添加一个顶层，该顶层有一个带有设计的切口。我想让背景中的图片相对快速地移动，只能通过切口看到。我怎样才能做到这一点？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>title</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--Custom CSS -->
<link href="css/custom.css" rel="stylesheet">
</head>
<body>
<!-- Full Page Image Background Carousel Header -->
<header id="myCarousel" class="carousel">
<!-- Wrapper for Slides -->
<div class="carousel-inner">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div>
</div>
<div class="item">
<!-- Set the second background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div>
</div>
<div class="item">
<!-- Set the third background image using inline CSS below. -->
<div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div>
</div>
</div>
</header>
<!-- Bootstrap Core Javascript -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Carousel -->
<script>
$('.carousel').carousel({
interval: 500 //changes the speed
})
</script>
</body>
</html>
html,
body {
height: 100%;
}
/*========================================
carousel
========================================*/
.carousel,
.item,
.active {
height: 100%;
}
.carousel-inner {
height: 100%;
}
/* Background images are set within the HTML using inline CSS, not here */
.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
最佳答案
好的。这是概念:尝试使用 style background-size: cover;
事实上，如果我站在我面前这样的问题 - 我已经创建了几个 block ，其中一个部分是为了隐藏轮播 - 设置为他的 background-size: cover 并移动在前面抛出 index-z .
关于html - 向 Bootstrap Carousel 添加顶层，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28529483/