没有在图像顶部显示文字

时间:2014-03-15 06:11:08

标签: css twitter-bootstrap

我正在使用codeigniter并在我的视图php页面中我需要在图像顶部显示文本。文本是从数据库渲染并需要显示图像的顶部还需要旋转文本才能显示

这是需要显示文字的图像

enter image description here

我正在使用Bootstrap(不是twitter Bootstrap)和jquery.I尝试显示这样的顶部文本图像,但它不是display.how我能解决这个问题吗?

这是尝试的代码

<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>

1 个答案:

答案 0 :(得分:1)

Codeigniter与你的问题无关,这是简单的CSS:)

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

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

例如(如果存在次要语法问题,请原谅)

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