如何在CSS中的图像上定位文本 [英] How to position text over an image in css

问题描述

 < div class =image> 
如何在css中的图像上放置文本？ 
< img src =sample.png/> 
< div class =text> 
< h2>一些文字< / h2> 
< / div> 
< / div> 
  

我想要做类似下面的事情，但是我遇到了困难，这里是我当前的css

 < style> 
 .image {
 position：relative; 
} 
 
 h2 {
 position：absolute; 
 top：200px; 
剩下：0; 
宽度：100％; 
 margin：0 auto; 
 width：300px; 
 height：50px; 
} 
< / style> 
  

 < style> 
 #image_container {
 width：1000px; 
 height：700px; 
 background-image：url（'switch.png'）; 
} 
< / style> 
< a href =prints.php>列印< / a> 
<？php ob_start（）; ？> 
< div id =image_container>< / div> 
<？php 
 $ _SESSION ['sess'] = ob_get_contents（）; 
 ob_flush（）; 
？> 
  

这里是prints.php：

 <？php require_once（'html2pdf / html2pdf.class.php'）; ？> 
<？php 
 $ html2pdf = new HTML2PDF（'L'，'A4'，'en'）; 
 $ html2pdf-> writeHTML（$ _ SESSION ['sess']）; 
 $ html2pdf->输出（'random.pdf'）; 
？> 
  

解决方案

类似这样的事情： http://jsfiddle.net/EgLKV/3/

它通过使用 position：absolute 和 z-index 将文本放置在图像上。

#container {height：400px;宽度：400px; position：relative;}＃image {position：absolute;左：0; top：0;}＃text {z-index：100;位置：绝对;白颜色; font-size：24px; font-weight：bold; left：150px;

> < img id =imagesrc =http://www.noao.edu/image_gallery/images/d4/androa.jpg/> < p id =text>你好，世界！ < / div>

How do I center a text over an image in css?

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

I want to do something like the one below but I'm having difficulties, here's my current css

<style>
.image {
   position: relative;
}

h2 {
   position: absolute;
   top: 200px;
   left: 0;
   width: 100%;
   margin: 0 auto;
   width: 300px;
   height: 50px;
}
</style>

When I use background-image I do not get any output from html2pdf:

<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();
?>

Here's prints.php:

<?php require_once('html2pdf/html2pdf.class.php'); ?>
<?php
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML($_SESSION['sess']);
$html2pdf->Output('random.pdf');
?>

解决方案

How about something like this: http://jsfiddle.net/EgLKV/3/

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>

这篇关于如何在CSS中的图像上定位文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！