[英]How can I put text over image card header bootstrap 4
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 ?输出:我可以将卡片标题移动到图像上吗?
Bootstrap 4 doesn't come with any native tools to achieve this within the card
component, 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-top
image inside a new wrapper called .card-img-caption
and then applying some positioning and z-index
so that the image always lays beneath the text.我们将
.card-img-top
图像封装在一个名为.card-img-caption
的新包装器中,然后应用一些定位和z-index
以便图像始终位于文本下方。
You'll likely want to fiddle with the margin
on .card-img-caption .card-text
as the 33%
being used here is more of a magic number than something more elegant.您可能想要摆弄
.card-img-caption .card-text
的margin
,因为此处使用的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
。
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>
I know this is old, but for those that are using Bootstrap 4, there is a native way to do this using the card-img-overlay
class.我知道这是旧的,但是对于那些使用 Bootstrap 4 的人来说,有一种使用
card-img-overlay
类的本机方法来做到这一点。
<div class="card bg-dark text-white">
<img class="card-img" src="..." alt="Card image">
<div class="card-img-overlay">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text">Last updated 3 mins ago</p>
</div>
</div>
https://getbootstrap.com/docs/4.0/components/card/#image-overlays https://getbootstrap.com/docs/4.0/components/card/#image-overlays
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>
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>
You must to use flex
class, 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.