如何使用CSS顯示一個數字（動態生成）到一個正方形

Question

我是新來的CSS。 我需要在Square（正常圖像，其臉部需要用動態數字替換）上顯示一個數字（通過ASP.NET MVC動作方法動態生成）。

有人可以幫助我這樣做。我相信只要知道CSS的人花一分鐘時間。

感謝， 維傑

Answer 1

最簡單的方法是創建一個<div>，它將圖像用作背景圖像屬性。然後，它也只是寫數到該分區的問題：

HTML

<div class="square"> 
    123 
</div> 

CSS

.square { 
    /* following are width and height of your background image */ 
    width: 100px; 
    height: 100px; 
    background: url(yourimg.png) no-repeat 0 0; 
} 

如果你必須使用<img>標籤，這是一個小技巧，但仍有可能：

HTML

<div class="square"> 
    <span>123</span> 
    <img src="yourimg.png" /> 
</div> 

CSS

.square { 
    /* following are width and height of your background image */ 
    width: 100px; 
    height: 100px; 

    position: relative; 
} 

.square img { 
    position: relative; 
    z-index: 1; 
} 

.square span { 
    position: absolute; 
    z-index: 2; 

    /* Use to position your number */ 
    top: 10px; 
    left: 10px; 
} 

上述作品由在底部（在帳戶較低的z索引）創建元素的堆疊，與<img>和絕對定位數它上面。這是有效的，因爲號碼的父母（<div class="square">）具有相對位置，所以它變成座標系。

Answer 2

你應該使用div內的彩色格和文字（數）可以這樣。你可能需要調整一下CSS來製作一個完美的正方形。

<div style="border: 1px solid black; background-color: red; color: white; font-size: 18px; padding: 15px;"> 
    <%: Model.RandomNumber %> 
</div> 

Answer 3

使用CSS background並將數字放在數字後面？