html - CSS:如何在图像上显示 "plot"不可见文本？

Question

假设我有一个包含 200x200 图片的网页。在坐标 50,50,150,150 (x1, y1, x2, y2) 处，假设我有字母“A”。

如何在 CSS 中执行以下操作:

1. 用从坐标 x1、y1 开始的字符“A”覆盖图像？
2. 调整文本大小使其适合 x1、y1、x2、y2？
3. 使文本不可见(但仍位于图像的“顶部”以便可以选择)？

此外，假设该图像可以由用户移动(例如通过拖放)。我将如何保持覆盖文本的位置？

Answer 1

使用绝对定位包装器，我们可以使用 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/