我想要一个较小的jumbotron / carousel，文字覆盖在页面顶部的图像上，就像我一样，但我不喜欢它的整体宽度看起来如何计划。
我还想知道是否有办法调暗图像或在文字后面放置透明背景，以便更明显？
我是一个想要学习绳索的新手开发人员。我无法想到我自己的项目需要解决，所以我想重新设计我的工作网站，以及更好的＆＃34;办法。他们目前拥有的网站没有响应。试着学习绳索比什么都重要。这是我的代码。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crabcake Factory | World Famous Cakes!</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link href="css/style.css" rel="stylesheet" >
</head>
<body>
<!--navigation -->
<div id="navmarg">
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><p>Crabcake Factory | Online</p></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Store <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Food</a></li>
<li><a href="#">Clothing/Accessories</a></li>
<li><a href="#">Gift Cards</a></li>
<li class="divider"></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Locations & Specials, Menu <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Locations & Specials</a></li>
<li><a href="#">Menu</a></li>
<li class="divider"></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--END NAV-->
<!--SLIDESHOW-->
<div id="myCarousel" class="carousel slide jumbotron">
<div class="container">
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="carousel-caption slidecenter">
<h1>World Famous Cakes</h1>
<p class="lead">Taste our world famous jumbo lump crabcakes!</p>
<button type="button" class="btn btn-success">Order Crabcakes Anywhere</button>
</div>
<img src="img/crabcakes.jpg" alt="Crabcake Factory World Famous Jumbo Lump Crabcakes - Shipped Worldwide!" class="img-responsive slidecenter">
</div>
<div class="item">
<div class="carousel-caption slidecenter">
<h1>Something for everyone</h1>
<p class="lead">Browse our menu!</p>
<button type="button" class="btn btn-success">Menu</button>
</div>
<img src="img/cakeplate.jpg" alt="Crabcake Factory World Famous Jumbo Lump Crabcakes - Shipped Worldwide!" class="img-responsive slidecenter">
</div>
<div class="item">
<div class=" carousel-caption slidecenter">
<h1>Stop by during happy hour</h1>
<p class="lead">Fenwick Happy Hour 12-6 | Best specials on the shore!</p>
<button type="button" class="btn btn-success">Locations & Specials</button>
</div>
<img src="img/drinks.jpg" alt="Crabcake Factory World Famous drinks, fenwick de drink specials" class="img-responsive slidecenter">
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="icon-prev"></span>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="icon-next"></span>
</a>
</a>
</div>
<!--END SLIDESHOW-->
<div class="container">
<div class="row">
<!--EMAIL LIST-->
<div class="col-xs-12 col-md-4 pull-right">
<div id="email-list">
<div class="widget widget-mailing-list" id="widget-mailing-list">
<div class="widget-header">
<h3>Stay up to date with Specials, Events and More!</h3>
</div>
<div class="widget-content">
<p>Sign up for online deals, news, events, specials, and more.</p>
</div>
<form action="//crabcakefactoryonline.us9.list-manage.com/subscribe/post?u=6140fd91fdae3db6f79963c78&id=207ed287eb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank">
<input placeholder="your@email.com" name="EMAIL" id="email-input" type="email">
<input class="btn" value="Sign Up" name="subscribe" id="email-submit" type="submit">
</form>
</div>
</div>
<!-- END HEADER -->
</div>
<!--END EMAIL LIST -->
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
CSS
#myCarousel{
}
.slidecenter{
margin: auto;
text-align: center;
}
.item img{
margin-top: 5px;
}
.carousel-indicators li{
border-color: #222;
}
.carousel-indicators li.active{
background-color: #222;
}
答案 0 :(得分：0)
这可能就是您所期待的：Bootsnipp Responsive Carousel
如果链接死亡：http://bootsnipp.com/snippets/featured/responsive-bs-carousel-with-hero-headers可以在www.bootsnipp.com上搜索＆＃34; Carousel＆＃34;。
重要的方面位于maridlcrmn's CSS文件中，她将英雄绝对定位为百分比，以便将文本的位置保持在视图的中心位置。您可能需要裁剪图像，因为它们是您的公司，以便更快地渲染。
修改
你提到你的文字溢出。有可能是你自己的一些样式导致这种情况，因为它不会出现在CSS和JS以及Bootstrap CDN中使用的唯一文件jQuery framework CDN的例子中。如果它仍然存在，则会有媒体查询，定位轮播中的文本。将其添加到CSS的末尾，屏幕宽度小于340像素。
@media screen and (max-width: 340px) {
.hero h1 {
font-size:0.8em;
}
}
答案 1 :(得分：0)
对于任何可能偶然发现这个问题的人来说，这就是我解决问题的方法：
我链接到包含此CSS的文件，就在我的自定义CSS之前（包含用于修复文本的媒体查询）
/*
Fade content bs-carousel with hero headers
Code snippet by maridlcrmn (Follow me on Twitter @maridlcrmn) for Bootsnipp.com
Image credits: unsplash.com
*/
/********************************/
/* Fade Bs-carousel */
/********************************/
.fade-carousel {
position: relative;
height: 100vh;
}
.fade-carousel .carousel-inner .item {
height: 100vh;
}
.fade-carousel .carousel-indicators > li {
margin: 0 2px;
background-color: #f39c12;
border-color: #f39c12;
opacity: .7;
}
.fade-carousel .carousel-indicators > li.active {
width: 10px;
height: 10px;
opacity: 1;
}
/********************************/
/* Hero Headers */
/********************************/
.hero {
position: absolute;
top: 50%;
left: 50%;
z-index: 3;
color: #fff;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 0 rgba(0,0,0,.75);
-webkit-transform: translate3d(-50%,-50%,0);
-moz-transform: translate3d(-50%,-50%,0);
-ms-transform: translate3d(-50%,-50%,0);
-o-transform: translate3d(-50%,-50%,0);
transform: translate3d(-50%,-50%,0);
}
.hero h1 {
font-size: 5em;
font-weight: bold;
margin: 0;
padding: 0;
}
.fade-carousel .carousel-inner .item .hero {
opacity: 0;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
.fade-carousel .carousel-inner .item.active .hero {
opacity: 1;
-webkit-transition: 2s all ease-in-out .1s;
-moz-transition: 2s all ease-in-out .1s;
-ms-transition: 2s all ease-in-out .1s;
-o-transition: 2s all ease-in-out .1s;
transition: 2s all ease-in-out .1s;
}
/********************************/
/* Overlay */
/********************************/
.overlay {
position: absolute;
width: 100%;
height: 100%;
z-index: 2;
background-color: #080d15;
opacity: .7;
}
/********************************/
/* Custom Buttons */
/********************************/
.btn.btn-lg {padding: 10px 40px;}
.btn.btn-hero,
.btn.btn-hero:hover,
.btn.btn-hero:focus {
color: #f5f5f5;
background-color: #1abc9c;
border-color: #1abc9c;
outline: none;
margin: 20px auto;
}
/********************************/
/* Slides backgrounds */
/********************************/
.fade-carousel .slides .slide-1,
.fade-carousel .slides .slide-2,
.fade-carousel .slides .slide-3 {
height: 100vh;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.fade-carousel .slides .slide-1 {
background-image: url(../img/crabcakes.jpg);
}
.fade-carousel .slides .slide-2 {
background-image: url(../img/cakeplate.jpg);
}
.fade-carousel .slides .slide-3 {
background-image: url(../img/drinks.jpg);
}
/********************************/
/* Media Queries */
/********************************/
@media screen and (min-width: 980px){
.hero { width: 980px; }
}
@media screen and (max-width: 440px) {
.hero h1 {
font-size:3.8em;
}
}
@media screen and (max-width: 340px) {
.hero h1 {
font-size:3em;
}
}
这是我的HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Crabcake Factory | World Famous Crabcakes!</title>
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href='http://fonts.googleapis.com/css?family=Slabo+27px' rel='stylesheet' type='text/css'>
<link href="css/carouselcss.css" rel="stylesheet" >
<link href="css/style.css" rel="stylesheet" >
</head>
<body>
<!--navigation -->
<div id="navmarg">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><p>Crabcake Factory | Open 9-9PM Daily!</p></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Online Store <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Food</a></li>
<li><a href="#">Clothing/Accessories</a></li>
<li><a href="#">Gift Cards</a></li>
<li class="divider"></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Locations & Specials, Menu <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Locations & Specials</a></li>
<li><a href="#">Menu</a></li>
<li class="divider"></li>
</ul>
</li>
<li><a href="#">Blog</a></li>
<li><a href="#">Our Story</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<!--END NAV-->
<!--START JUMBO SLIDER-->
<div class="carousel fade-carousel slide" data-ride="carousel" data-interval="4000" id="bs-carousel">
<!-- Overlay -->
<div class="overlay"></div>
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#bs-carousel" data-slide-to="0" class="active"></li>
<li data-target="#bs-carousel" data-slide-to="1"></li>
<li data-target="#bs-carousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item slides active">
<div class="slide-1"></div>
<div class="hero">
<hgroup>
<h1>Hungry?</h1>
<h3>We ship delicious crabcakes World Wide!</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Order Crabcakes</button>
</div>
</div>
<div class="item slides">
<div class="slide-2"></div>
<div class="hero">
<hgroup>
<h1>Something for Everyone</h1>
<h3>Browse our menu!</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Menu</button>
</div>
</div>
<div class="item slides">
<div class="slide-3"></div>
<div class="hero">
<hgroup>
<h1>Rockin' Specials!</h1>
<h3>The Best on the Shore!</h3>
</hgroup>
<button class="btn btn-hero btn-lg" role="button">Locations & Specials</button>
</div>
</div>
</div>
</div>
<!--END JUMBO SLIDER-->
<div class="container">
<div class="row">
</div>
</div><!--ENDCONTAINER-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>