css - 没有在图片上方显示文字

Question

我正在使用 codeigniter，在我的 View php 页面中，我需要在图像的顶部显示文本。文本是从数据库呈现的，需要显示在图像的顶部，文本也需要旋转才能显示

这是文本需要蜜蜂显示的图像

我正在使用 Bootstrap(不是 twitter Bootstrap)和 jquery。我尝试像这样在顶部显示文本图像，但它没有显示。我该如何解决这个问题？

这是要尝试的代码

<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">
                <p style="-o-transform: rotate(32deg);-moz-transform: rotate(32deg);-webkit-transform: rotate(32deg);">$<?php echo $car_data['Charges']; ?></p>

Answer 1

Codeigniter 与您的问题无关，这是简单的 CSS :)

为您要添加的图像和文本(或其他图像)创建一个容器 div。将所有位置设置为相对位置。

大图可以作为 div 的背景，而内部文本/图像可以设置为绝对，并根据需要定位。

例如(如果存在小的语法问题请原谅)

<div style="background-image('IMAGE/PATH');position:relative">
<p style="position:aboslute"> SOME TEXT HERE </p>
</div>