如何在CSS中的图像上放置文本
如何在css中将图像置于图像中间？
<div class="image"> <img src="sample.png"/> <div class="text"> <h2>Some text</h2> </div> </div> 我想做一些像下面这样的东西，但我有困难，这是我目前的CSS
<style> .image { position: relative; } h2 { position: absolute; top: 200px; left: 0; width: 100%; margin: 0 auto; width: 300px; height: 50px; } </style>
当我使用背景图像时，我没有从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(); ?>
这里是prints.php：
<?php require_once('html2pdf/html2pdf.class.php'); ?> <?php $html2pdf = new HTML2PDF('L', 'A4', 'en'); $html2pdf->writeHTML($_SESSION['sess']); $html2pdf->Output('random.pdf'); ?>
怎么样这样的： http : //jsfiddle.net/EgLKV/3/
它通过使用position:absolute和z-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; }
<div id="container"> <img id="image" src="http://www.noao.edu/image_galleryhttp://img.dovov.comd4/androa.jpg" /> <p id="text"> Hello World! </p> </div>
这是处理响应大小的另一种方法。 它会保持你的文本居中，并保持其父母的位置。 如果你不想让它居中，那就更简单了，只需要使用absolute参数。 请记住主容器正在使用display: inline-block 。 还有很多其他方法可以做到这一点，这取决于你在做什么。
以“围绕未知”为中心
在这里工作codepen示例
HTML
<div class="containerBox"> <div class="text-box"> <h4>Your Text is responsive and centered</h4> </div> <img class="img-responsive" src="http://placehold.it/900x100"/> </div>
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; }
为什么不将sample.png设置为text或h2 css类的背景图像？ 这将会影响你写下的图像。
对于响应式设计，使用具有固定布局的相对布局和内容（放置在容器中）的容器是很好的。
CSS样式：
/*Centering element in a base container*/ .contianer-relative{ position: relative; } .content-center-text-absolute{ position: absolute; text-align: center; width: 100%; height: 0%; margin: auto; top: 0; left: 0; bottom: 0; right: 0; z-index: 51; }
HTML代码：
<!-- Have used ionic classes --> <div class="row"> <div class="col remove-padding contianer-relative"><!-- container with position relative --> <div class="item item-image clear-border" ><a href="#"><img ng-src="img/engg-manl.png" alt="ENGINEERING MANUAL" title="ENGINEERING MANUAL" ></a></div> <!-- Image intended to work as a background --> <h4 class="content-center-text-absolute white-text"><strong>ENGINEERING <br> MANUALS</strong></h4><!-- content div with position fixed --> </div> <div class="col remove-padding contianer-relative"><!-- container with position relative --> <div class="item item-image clear-border"><a href="#"><img ng-src="img/contract-directory.png" alt="CONTRACTOR DIRECTORY" title="CONTRACTOR DIRECTORY"></a></div><!-- Image intended to work as a background --> <h4 class="content-center-text-absolute white-text"><strong>CONTRACTOR <br> DIRECTORY</strong></h4><!-- content div with position fixed --> </div> </div>
对于IONIC Grid布局，均匀分布的网格元素和上述HTML中使用的类别，请参阅 – Grid：均匀间隔列 。 希望它可以帮助你… 🙂
正如Harry Joy指出的那样，将图像设置为div的背景，然后，如果只有一行文本，则可以将文本的行高设置为与div高度相同，这会将文本置于div的中心。
如果你有多行，你需要将显示设置为表格单元格和垂直对齐到中间。
截至2017年，这是更响应和为我工作。 这是为了把文字放在里面，比如徽章。 而不是数字8，我有一个变量来从数据库中提取数据。
这个代码从Kailas的回答开始
https://jsfiddle.net/jim54729/memmu2wb/3/
我的HTML
<div class="containerBox"> <img class="img-responsive" src="https://s20.postimg.org/huun8e6fh/Gold_Ring.png"> <div class='text-box'> <p class='dataNumber'> 8 </p> </div> </div>
和我的CSS：
.containerBox { position: relative; display: inline-block; } .text-box { position: absolute; height: 30%; text-align: center; width: 100%; margin: auto; top: 0; bottom: 0; right: 0; left: 0; font-size: 30px; } .img-responsive { display: block; max-width: 100%; height: 120px; margin: auto; padding: auto; } .dataNumber { margin-top: auto; }
一个小而简短的方式做同样的事情
HTML
<div class="image"> <p> <h3>Heading 3</h3> <h5>Heading 5</h5> </p> </div>
CSS
.image { position: relative; margin-bottom: 20px; width: 100%; height: 300px; color: white; background: url('../../Images/myImg.jpg') no-repeat; background-size: 250px 250px; }
