如何在圖片HTML上繪製文字？

enter image description here

當頁面加載我需要顯示價格一側photo.I嘗試這樣

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

但它沒有像我期望的那樣工作，我可以做這個。如果有另一個簡單的方法呢？

來源

2014-03-27 user2951386

我認爲這可能有助於告訴我們期望什麼。 – Shomz

我想你可以通過css將圖像用作'background-image'。 – Sbls

將值z-index加到<img>和<h2>。例如，<img>的z-index:98,<h2>的z-index:99。（因爲您希望它位於頂部，因此值更高）。

我還建議將所有樣式移動到一個css文件，而不是使用內聯style屬性。

來源

2014-03-27 18:16:06 Mooseman

下面是使用background-image一個div中，這樣就可以把更多的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

來源

2014-03-27 18:24:49 13ruce1337

如何在圖片HTML上繪製文字？

回答

相關問題