向 Bootstrap Carousel 添加顶层答案

【问题标题】：Adding a top layer to Bootstrap Carousel向 Bootstrap Carousel 添加顶层
【发布时间】：2015-02-15 18:23:55
【问题描述】：

我正在使用最新的 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;
}

【问题讨论】：

标签： html css twitter-bootstrap carousel layer

【解决方案1】：

好的。这是概念：尝试使用stylebackground-size: cover;

事实上，如果我站在我面前这样的问题 - 我已经创建了几个街区，其中一部分是为了隐藏轮播 - 设置为他的 background-size: cover 并移动到前面扔 index-z 。

【讨论】：

如果您可以编辑您的答案并解释您所显示的代码的作用，以及该代码为何/如何回答问题，它真的很有帮助。