web字體浮在圖像中央

在做項目的過程中遇到了需要將圖像作為背景，將字體顯示在圖像中央需求。

嘗試了兩種做法：

第一種方法為設置一個div設置屬性為relative固定這個框的位置，將圖片鋪在div塊里。

在div再設一個div存放字體，z-index設置為2，及圖片在下麵，字體在上面，字框的屬性設置為absoulte（絕對定位）。

這樣就可以設置字體對於圖像的偏移，具體代碼如下：

 <div" style="position: relative;" >
    <img src="/images/mobile/mobile1.jpg" />
    <div style="position: absolute; z-index: 2; left: 45%; top: 45%">字體</div>
</div>

缺點：如果字體是可變的，則不好設置偏移的位置。圖像也不是自適應，在不同的瀏覽器中效果也不相同

第二種方法為將圖像作為背景，字體居中顯示。

具體代碼如下：

#text{
    background: url(/images/mobile.jpg);
    filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";
    -moz-background-size: 100%100%;
    background-size: 100%100%;
} 

<div id = "text" style ="width : 100px ;height:100px">  

    <div style ="text-align:center; line-height:100px; " >字體</div>

</div>