CSS：如何在圖像上「繪製」隱形文字？

假設我有一個包含200x200圖片的網頁。在座標50,50,150,150（x1，y1，x2，y2）處，假設我有字母「A」。CSS：如何在圖像上「繪製」隱形文字？

我該怎麼做在CSS如下：

疊加字符「A」開始在座標X1，Y1的形象呢？
調整文本的大小以使其適合x1，y1，x2，y2？
使文本不可見（但仍然位於圖像的「頂部」，以便可以選擇）？

此外，說這個圖像可以由用戶移動（例如通過拖放）。我將如何保持重疊文本的位置？

2010-10-31 StackOverflowNewbie

如果必須使用座標圖像映射是最好的解決辦法。即使你可以移動的圖像，座標將保持相同的（我認爲） – 2010-10-31 21:32:18

使用絕對定位的包裝，我們可以使用img標籤圖像中添加，然後用span以包含重疊文本，像這樣：

<div id="wrapper"> 
    <img src="image.png" alt="" /> 
    <span id="text">A</span> 
</div>

第一部分很簡單：通過絕對定位相對定位的包裝內span，我們可以span移動到正確的位置：

#wrapper { 
    position: relative; 
} 

#wrapper #text { 
    position: absolute; 
    top: 50px; 
    left: 50px; 
}

第二部分有點陌生。問題在於，對於字體，100px的font-size實際上不會導致字體填充100px高度的框。你將不得不嘗試找到正確的字體大小。但是，我們可以調整span所以它是50像素寬，50像素高：

#wrapper #text { 
    display: inline-block; 
    width: 100px; 
    height: 100px; 
    font-size: 100px; 
    line-height: 1em; 
    text-align: center; 
    vertical-align: middle; 
}

添加一個border將顯示該跨度有正確的尺寸，這封信同時在垂直和水平居中。

最後，第三部分很簡單如果我們只針對這裏的現代瀏覽器。使用零不透明度的rgba顏色，我們可以使文本不可見並且可以同時選擇。

#wrapper #text { 
    color: rgba(255, 255, 255, 0); 
}

獎勵：讓事情變得可拖動。通過放入jQuery UI Draggable，我們可以輕鬆地使框可拖動。在cancel選項中添加選項，以便文本保持可選狀態，我們就完成了！

$('#wrapper').draggable({ 
    cancel: '#text' 
});

看到這一切走到一起在這裏：http://www.jsfiddle.net/yijiang/83W7X/

來源

2010-11-01 13:27:11

我試圖解決同樣的問題，我已經看到了這個解決方案除了在選擇文本時可以看到。有沒有辦法讓選定的文本（雖然不是選擇本身）隱形？ – 2011-08-31 06:51:04

您可以嘗試將[':: selection']（https://developer.mozilla.org/en/CSS/%3A%3Aselection）僞元素的'color'屬性設置爲'transparent' – 2011-08-31 07:00:07

Grand！非常好的反饋，爲你+1 – 2011-08-31 08:52:22

我首先想到的是，你的圖像作爲背景設置爲span，div，或其他容器元素（無論是適當的內容和你的頁面上的目的），然後用填充到位置的字符在容器內。通過在容器上設置font-size來設置文本大小，然後使用text-indent: -999999px使文本隱藏。

當包含元素被移動時，文本的位置將保持不變，因爲位置相對於容器。

來源

2010-10-31 22:35:14 derekerdmann

-1

在http://www.jsfiddle.net/gaby/dKuBc/

來源

2010-11-01 13:30:08

只需創建一個image map

例如（以字母:)）使用畫布設置背景首先形象。然後使用以下方法

void fillText(in DOMString text, in float x, in float y, [optional] in float maxWidth);

在上面設置文本。

來源

2010-11-01 14:48:17 Kasturi

CSS：如何在圖像上「繪製」隱形文字？

回答

相關問題