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：如何在图像上“绘制”隐形文字？

回答

相关问题