twitter-bootstrap 如何将文本放在图像卡标题引导程序 4 上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46889275/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I put text over image card header bootstrap 4
提问by test1321
I try to put Title over the image, I want My card-title over my image not sure do I need CSS?
我尝试将标题放在图像上，我想要我的卡片标题放在我的图像上不确定我是否需要 CSS？
here is my HTML
这是我的 HTML
<div class="card card-blog">
<div class="card">
<a href="#pablo">
<img class="img" src="assets/img/backgound.jpg">
</a>
</div>
<div class="card-body text-center">
<h4 class="card-title">
TEXT OVER IMAGE
</h4>
<div class="card-description">
<div class="table-responsive">
</div>
</div>
<div class="card-footer">
<a href="#pablo" class="btn btn-danger btn-round">View Article</a>
</div>
</div>
</div>
</div>
Output : Can I move card-title over image ?
输出：我可以将卡片标题移动到图像上吗？
回答by Robert
Bootstrap 4 doesn't come with any native tools to achieve this within the cardcomponent, but with a little additional CSS you can make it work:
Bootstrap 4 没有附带任何本地工具来在card组件中实现这一点，但是通过一些额外的 CSS，您可以使其工作：
.card-img-caption {
border-top-left-radius: calc(.25rem - 1px);
border-top-right-radius: calc(.25rem - 1px);
}
.card-img-caption .card-img-top {
z-index: 0;
}
.card-img-caption .card-text {
text-align: center;
width: 100%;
margin: 33% 0;
position: absolute;
z-index: 1;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="card" style="width: 20rem;">
<div class="card-img-caption">
<p class="card-text">Test</p>
<img class="card-img-top" src="http://placehold.it/130x100" alt="Card image cap">
</div>
<div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>We're encapsulating the .card-img-topimage inside a new wrapper called .card-img-captionand then applying some positioning and z-indexso that the image always lays beneath the text.
我们将.card-img-top图像封装在一个名为的新包装器中.card-img-caption，然后应用一些定位，z-index以便图像始终位于文本下方。
You'll likely want to fiddle with the marginon .card-img-caption .card-textas the 33%being used here is more of a magic number than something more elegant.
您可能想要摆弄marginon.card-img-caption .card-text因为33%这里使用的更像是一个神奇的数字，而不是更优雅的数字。
If you know the dimensions of the image you're using as a background though; a smarter move might be to do just that... use a background-image.
如果您知道用作背景的图像的尺寸；一个更聪明的举动可能就是这样做……使用background-image.
回答by Raguvaran R
Try like this:
像这样尝试：
#container {
height: 400px;
width: 400px;
position: relative;
}
#image {
position: absolute;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 150px;
top: 350px;
}<div id="container">
<img id="image" src="http://www.noao.edu/image_gallery/images/d4/androa.jpg" />
<p id="text">
Hello World!
</p>
</div>回答by Dave Allan
Here is my solution using the bootstrap img-wrapper and img-overlay classes.
这是我使用 bootstrap img-wrapper 和 img-overlay 类的解决方案。
<div class="card">
<div class="img-wrapper">
<img class="card-img-top" src="images/mytopimage.png"/>
<div class="img-overlay"> <h2>Text Over Image</h2> </div>
</div>
<div class="card-body">
<h2 class="card-title">My Card</h2>
<p class="card-text">My Card Text</p>
</div>
</div>
回答by Jhonny Garcia
You must to use flexclass, try this!
你必须使用flex类，试试这个！
<div class="card">
<div class="d-flex flex-wrap align-items-center justify-content-center">
<a href="#pablo">
<img class="card-img-top" src="assets/img/backgound.jpg">
</a>
<h4 class="card-title">TEXT OVER IMAGE</h4>
</div>
<div class="card-body text-center">
<div class="card-description">
<div class="table-responsive"></div>
</div>
<div class="card-footer">
<a href="#pablo" class="btn btn-danger btn-round">View Article</a>
</div>
</div>
</div>
回答by Ahmed Al-Imran
Can you add class 'carousel-caption' to the text
你能在文本中添加类'carousel-caption'吗
<div class="card card-blog">
<div class="card">
<a href="#pablo">
<img class="img" src="http://placehold.it/1000x550">
</a>
</div>
<div class="card-body text-center carousel-caption">
<h4 class="card-title">
TEXT OVER IMAGE
</h4>
<div class="card-description">
<div class="table-responsive">
</div>
</div>
<div class="card-footer">
<a href="#pablo" class="btn btn-danger btn-round">View Article</a>
</div>
</div>
</div>
