[英]How to display text over this image
How do I center a text over an image in css? 如何在CSS中将文本居中放置在图像上?
Here I'm attaching the code, I'm a newbie in css 我在这里附加代码,我是CSS中的新手
<div class="image">
<img src="sample.png"/>
<div class="text">
<h2>Some text</h2>
</div>
</div>
<style>
.image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
margin: 0 auto;
width: 300px;
height: 50px;
}
</style>
How about something like this:
Its done by using position:absolute and z-index to place the text over the image.
#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>
You can use something like the following: 您可以使用如下所示的内容:
.image { position: relative; } img { width: 100%; height: 200px; } .text { position: absolute; bottom:0; left: 0; width: 100%; } .text h2 { text-align: center; color: #FFF; }
<div class="image"> <img src="https://cdn.photographylife.com/wp-content/uploads/2015/10/Wadi-Rum-5-650x434.jpg" alt="My Image" /> <div class="text"> <h2>Some text</h2> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.