How to place text on an image using CSS
P粉696605833
2023-08-23 17:18:53
<p>How to place text over an image in CSS? </p>
<pre class="brush:php;toolbar:false;"><div class="image">
<img src="sample.png"/>
<div class="text">
<h2>Some text</h2>
</div>
</div></pre>
<p>I want to do something like below but I'm stuck, here is my current css</p>
<pre class="brush:php;toolbar:false;"><style>
.image {
position: relative;
}
h2 {
position: absolute;
top: 200px;
left: 0;
width: 100%;
margin: 0 auto;
width: 300px;
height: 50px;
}
</style></pre>
<p>I don't get any output from html2pdf when I use a background image: </p>
<pre class="brush:php;toolbar:false;"><style>
#image_container{
width: 1000px;
height: 700px;
background-image:url('switch.png');
}
</style>
<a href="prints.php">Print</a>
<?php ob_start(); ?>
<div id="image_container"></div>
<?php
$_SESSION['sess'] = ob_get_contents();
ob_flush();
?></pre>
<p>This is prints.php: </p>
<pre class="brush:php;toolbar:false;"><?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?></pre>
<p><br /></p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is another way to use responsive dimensions. It will keep your text centered and maintain its position in the parent. If you don't want it to be centered, it's even easier, just use the
absoluteparameter. Remember that the main container is usingdisplay: inline-block. There are many other ways to achieve this, depending on what you're working with.Based onUnknown-centered
Here is a working codepen example
HTML
CSS
.containerBox { position: relative; display: inline-block; } .text-box { position: absolute; height: 100%; text-align: center; width: 100%; } .text-box:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; } h4 { display: inline-block; font-size: 20px; /*or whatever you want*/ color: #FFF; } img { display: block; max-width: 100%; height: auto; }How about something like this: http://jsfiddle.net/EgLKV/3/
Done by positioning the text on the image using
position:absoluteandz-index.#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; }