創建使用圖像和文本的內聯符號

我有一個相當大的圓形圖像，以便根據它的位置將其調整爲更小或更大。它的目的是成爲一個或兩個字符的背景圖像。創建使用圖像和文本的內聯符號

基本上，在一個特定的元素中，無論數字1或2出現在哪裏，我都希望圓圈出現在文本後面，無論文本出現在哪個元素中。與文本混合在一起的其他圖像可以放在沒有問題的位置。我正在通過ems來確定它們的位置，以便將它們留在需要去的地方。

因此，對於使這項工作作爲一個例子/問題的緣故：

這是圖像：http://gumOnShoe.net/NewCard/Frames/Mana/mana_circle.png

所以，基本上，我需要的文字像這樣的工作：

This is a paragraph (1) of the text.

其中（1）圖像的大小適中，數字1位於其中心。圖像可以是1.2 em來補償文本，但我會在稍後調整大小。我正在用javascript做這件事，但如果有人能幫我弄清楚CSS樣式是什麼，我可以從那裏繼續。

有關頁面的一些其他內容是，符號/文本混合必須位於浮動到div右側的表格單元格內，這是相對定位的，位於另一個絕對定位的div內。不知道是否會有任何與顯示設置混亂，但這就是我正在看。謝謝。

來源

2011-09-30 Brian K.

您將要包括（1）設置爲display: inline-block;

這會給跨度的跨度內塊元素功能（設置背景圖像和寬度），同時仍然與文本一起流動。您可以使用屬性background-size更改背景圖像大小，並將其設置爲相同的跨度寬度。

看看這個JSFiddle。

來源

2011-09-30 15:14:08 skyline3000

與css3你可能也可以做到這一點，設置背景大小爲「包含」（我不是100％確定這一點，但我認爲它應該工作 - 至少當你使用相同高度的字體系列和寬度） – Andrej

似乎是最好的方法來做到這一點，使之前手工完成的圖像。謝謝，它接近我一直在搞的東西，但是我很難調整文本的大小，所以我會嘗試你的方法，看看它做了什麼。 –

請注意，並非所有瀏覽器都支持'display：inline-block;'很多人仍然使用舊版本的IE。 – megaflop

我只能看到這與一個單一的空間字體工作。將圖像用於包含文本的元素的背景圖像。獲取字符串中'1'的索引。將background-position設置爲索引+ 1的em值。如果出現多次，則必須在包含文本的元素下面添加絕對定位元素。

來源

2011-09-30 15:10:39

我正在使用一種模擬真實生活中的產品的字體，我無法改變它，否則我的用戶會感到憤怒。另一個項目的好主意。不過謝謝。 –

據我所知，你不能改變使用CSS的背景圖像的大小。如果您的圖片不必動態調整大小，則可以將中的數字與相應的background-image和其他CSS規則設置一起包裝。

<p> 
    Lorem 
    <img 
     src="http://gumOnShoe.net/NewCard/Frames/Mana/mana_circle.png" 
     style="width: 1em; height: 1em;" /> 
    <span 
     style="margin-left: -1em; 
      width: 1em; 
      display: inline-block; 
      text-align: center;">1</span> 
    ipsum. 
</p>

就個人而言，雖然，我會創造出不同大小的圖像，並利用它們作爲背景圖像針對跨距周圍數：

然而，以下將在支持CSS display: inline-block;最新的瀏覽器中工作。喜歡的東西：

<p class="big-text"> 
    Lorem <span class="number">1</span> ipsum 
</p> 
<p class="small-text"> 
    Lorem <span class="number">1</span> ipsum 
</p>

...用CSS：

p.big-text span.number { 
    background-image: url(/big-circle.png); 
} 

p.small-text span.number { 
    background-image: url(/small-circle.png); 
}

來源

2011-09-30 15:11:31 megaflop

或者爲什麼不保存版本的圖像與圖像本身寫入的數量：mana_circle_1.png，mana_circle_2.png等，然後只需添加適當的這樣的：'Lorem ipsum' ... – megaflop

用戶輸入。坦率地說，這個數字可以是0到1000之間的任何數字。雖然我可能只會做20個，所以這可能是一個選擇。這是最後的手段。此外，我需要根據用戶輸入的文本數量動態調整這些圖像的大小以將其保留在框中。它的複雜性，從長遠來看，這樣的圖像實際上可能是最好的想法，但它意味着更多的勞動力在我的服務器上創建它們並創建更多圖像。 –

您安裝了哪些服務器端語言？如果你有PHP，你可以使用GD擴展來動態創建圖像。 – megaflop

因爲我不能修改我的上述評論，我以爲張貼作爲一個答案：

使用CSS3，你也許可以做這樣的：

font-family:monospace; 
font-size:2em; 
padding:5px; 
background: url(http://gumonshoe.net/NewCard/Frames/Mana/mana_circle.png) no-repeat center center; 
-webkit-background-size: contain; 
-moz-background-size: contain; 
-o-background-size: contain; 
background-size: contain;

結賬演示：http://jsfiddle.net/gWhqP/

來源

2011-09-30 15:25:30 Andrej

創建使用圖像和文本的內聯符號

回答

相關問題