如何在图像HTML上绘制文字？

Question

我需要在图像顶部绘制文字，如图所示

当页面加载时我需要在照片旁边显示价格。我试试这个

<button class="btn btn-danger" id="buy-btn" data-toggle="modal" data-target=".package-buy-modal">BOOK NOW</button>
<img id="price-tag" style="position: relative;width: 100%; /* for IE 6 */" src="<?php echo base_url()?>assets_profile/img/price.png">
<h2 style="-o-transform: rotate(32deg);-moz-transform: rotate(32deg);-webkit-transform: rotate(32deg);">$<?php echo $car_data['Charges']; ?></h2>

但它没有像我预期的那样工作。我能做到这一点。如果还有另一种简单的方法吗？

Answer 1

以下是在div中使用background-image的示例，以便您可以在div中添加更多内容，即文本

HTML：

<div id='image' src='http://i.stack.imgur.com/1DZ6X.jpg'>
    <h2 id='price'>Price: $10</h2>
</div>

CSS：

#image {
    width:243px;
    height:163px;
    background-image:url('http://i.stack.imgur.com/1DZ6X.jpg');
}

check it out here

Answer 2

为z-index和<img>添加<h2>值。例如，z-index:98上为<img>，z-index:99为<h2>。 （值得更高，因为你想要它在上面）。

我还建议将所有样式移动到css文件，而不是使用内联style属性。