在圖像背景上顯示文字

我正在嘗試爲我的項目做些新的事情。我有一個圖標，可以說有點像郵件圖標。在圖像背景上顯示文字

加載頁面時，圖標也會被渲染。根據我在頁面加載過程中在後臺執行的查詢計數，我想在圖標內/中顯示該數字（計數）。有點像我看到Facebook上的通知顯示在圖標頂部或Gmail顯示圖標上有2個新電子郵件等。

最初，我想爲每個數字都設置一個不同的圖標，因爲我有限制計數的最大限制。但是我正在考慮更好地以編程方式執行的其他選項。

來源

2013-10-02 ZVenue

是。我問是否有人這樣做過，他們是如何處理這種情況的。我說我可以爲每個數字使用不同的圖標，但是應該有其他方式可以做到這一點，而不是在顯示大數字時創建100個圖標。 – ZVenue

您是在討論favicon或實際圖標在頁面上的某個地方？數字可以呈現爲文字還是必須是圖形的一部分？ – Ennui

我認爲這個問題應該已經發布在[meta.stackoverflow.com]（http://meta.stackoverflow.com） – vishalkin

我會建議使圖標圖像的div的背景左右，那麼你可以把它放在頂部的數字作爲純文本，使用填充移動它。

來源

2013-10-02 13:39:45

不知道爲什麼這是downvoted - 這是一個明顯的答案。你需要一個帶'background-image'的'span'或'div'，你將用它來存儲整型變量。 – user1477388

@ ced-b ..這是一個好主意。這就是我正在尋找的......只是關於如何解決展示問題的一般想法..有些人會得到更多樂趣低調的問題，而不是專注於幫助。 :-) – ZVenue

@ZVenue是的 - 我很高興我可以幫忙。 –

儘管被回答和接受，只是想分享如何做到這一點，就像我之前在我的一個項目中做的那樣。把它作爲代碼參考。

HTML：

<a href="#" class="icon" > 
    <span class="jewel">2</span> 
</a>

CSS：

.icon { 
    position: relative; 
    display: inline-block; 
    height: 24px; 
    padding: 0px 4px 0px 20px; 
    background: ....; 
} 

.jewel { 
    position: absolute; 
    display: block; 
    top: -8px; right: -8px; 
    height: 16px; width: 16px; 
    text-align: center; 
    color: White; 
    background-color: Red; 
    overflow: hidden; 
}

工作小提琴：http://jsfiddle.net/gE3hz/

來源

2013-10-02 14:13:51 Abhitalks

非常感謝您提供解決方案。 – ZVenue

我認爲這正是我正在尋找的..再次感謝。 – ZVenue

很高興有幫助:) – Abhitalks

在圖像背景上顯示文字

回答

相關問題