Html 正在尝试围绕引导转盘上的文本创建框容器
我有一些文字在我的图像顶部为我的旋转木马如下所示 我想在文本周围添加一个不透明的框,这样更容易阅读。我试过一些东西,但盒子开始缩小,形状变得很奇怪 这是我的旋转木马的html:Html 正在尝试围绕引导转盘上的文本创建框容器,html,css,twitter-bootstrap,containers,Html,Css,Twitter Bootstrap,Containers,我有一些文字在我的图像顶部为我的旋转木马如下所示 我想在文本周围添加一个不透明的框,这样更容易阅读。我试过一些东西,但盒子开始缩小,形状变得很奇怪 这是我的旋转木马的html: <!-- Carousel --> <header id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel"> <!-- Indicators --> <ol class
<!-- Carousel -->
<header id="myCarousel" class="carousel slide carousel-fade" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for Slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<!-- Set the first background image using inline CSS below. -->
<img src="img/golden_egg3.jpg" class="img-responsive first-slide" alt="First slide">
<div class="container">
<div class="carousel-caption">
<div class="caption-one">
<h1>The right Wealth Advisor can make a big difference.</h1>
<br>
<a href="contact.html" class="btn btn-primary btn-lg hvr-underline-from-left" role="button">Learn More</a>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Set the first background image using inline CSS below. -->
<img src="img/graph_in_hand3.jpg" class="img-responsive second-slide" alt="Second slide">
<div class="container">
<div class="carousel-caption">
<div class="caption-two">
<h1>Personal Wealth Planning is not<br> just charts and graphs, it's about<br> taking control of your financial future.</h1>
<a class="btn btn-lg btn-primary hvr-underline-from-left" href="contact.html" role="button">Learn More</a>
</div>
</div>
</div>
</div>
<div class="item">
<!-- Set the first background image using inline CSS below. -->
<img src="img/jar_with_coins3.jpg" class="img-responsive third-slide" alt="Third slide">
<div class="container">
<div class="carousel-caption">
<div class="caption-three">
<h1>Successful investing takes<br> time, discipline and patience.</h1>
<a class="btn btn-lg btn-primary hvr-underline-from-left" href="contact.html" role="button">Learn More</a>
</div>
</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</header>
这就是我得到的:
看起来不错,但肯定会更好。在手机上:
更糟。我不知道为什么我的按钮这么大,因为我在联系人页面上使用了同样的按钮,而且它的缩放效果非常好。非常感谢您的帮助。我对您的代码做了一些更改,希望能奏效
.carousel标题{
背景色:#282828 ;;
不透明度:0.75;
}
@介质(最大宽度:768px){
h1{
字体大小:14px;
}
}
合适的财富顾问可以带来巨大的不同。
.caption-one {
background-color: #282828;
opacity: 0.75;
padding-left: 2%;
margin-right: 38%;
padding-bottom: 2%;
width: 40%;
}