Javascript 如何在不均匀的背景图像周围错开文本？

作为一名网络制作人，我经常会得到一个可爱的模型，文本环绕在一个明显的背景图像上。内容将来自后端CMS，我不希望编辑人员担心插入

标签等

Lorem ipsum dolor sit amet, consectetuer adiping elit,       xxxxxxxxxxxxxx
sed diam nonummy nibh euismod tincidunt ut lao           xxxxxxxxxxxxxxxxxx
dolore magna aliquam erat volutpat. Ut wisi       xxxxxxxxxxxxxxxxxxxxxxxxx
enim ad minim veniam, quis nostrud exerci       xxxxxxxxxxxxxxxxxxxxxxxxxxx
tation ullamcorper suscipit lobortis          xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
ut aliquip ex ea commodo consequat.       xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
Duis autem vel eum iriure dolor in       xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
hendrerit in vulputate velit esse       xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
molestie consequat, vel illum         xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

---

有没有人知道一个解决方案，可以通过脚本css使这类事情自动化？

哎哟，很难。假设您的图像在左侧是透明的，我能想到的最接近的东西是一个脚本，它可以找到透明像素，并且——在一定的细节层次上——生成一组浮动div，覆盖图像并避免文本挡住。这并不是完全的关键，但它们向您展示了如何在PHP中不费吹灰之力地完成它。

您所说的是任意背景图像还是固定背景图像？如果你想在任何旧背景下进行扫描，那么你需要做一些认真的像素扫描，这几乎肯定会发生在服务器端，可能不值得你花时间。你最好只是把文本烘焙到图像中

---

如果你只想为一张图片做这件事，你的选择会更好，但仍然不美观。首先想到的是使用单空格字体，测量每行可以容纳多少个字符，然后在此基础上在适当的字符串位置使用js函数insert中断。

如果您确实必须在浏览器端执行此操作，并且希望它尽可能接近“像素完美”（在指定图像形状周围的精确边距方面），您可能需要使用HTML 5的

功能。有了它，您将需要执行一些“基本”图像处理：

此示例适用于文本右侧的图像，如您的示例

对图像运行算法（可能是算法，因为它简单且速度快）以查找边界。或者，如果您可以保证图像具有坚实的背景，您可以选择简单地根据该背景颜色对图像进行阈值设置，以从背景中获取图像主题的颜色

给定您的

行高

，遍历图像的行，以找到图像边框到图像主题开头（我们分割的部分）的最大距离，该距离适用于图像边框的每行文本。

取该最大值，然后从图像的总宽度中减去该值，以获得距图像右侧的距离

将此宽度推到阵列上

arr

在包含文本的DOM节点的开头，添加

arr.length

节点，每个节点都有

style="height: [your text's line-height]; 
       width: [value of arr at current element]; 
       margin-left: [desired margin]; 
       float: right; clear: right"

编辑

---

我为这项技术编写了一个jQuery插件，你可以在它的主页上找到它，我应该补充一下，我一直使用的答案是“没有一个简单的方法来包装不规则的图像，所以你要么需要改变你的设计，要么接受编辑会为此责备你而不是我"。将文本烘焙到图像中会导致可访问性问题，除非您选择为图像添加大量标题属性，或者使用文本缩进或显示的技巧之一：无以将文本移出屏幕。非常正确。在为web设计时，可访问性始终是一件需要牢记的好事情。请注意，我没有说过我认为是这样的不过，这是个好主意：）+1那篇文章正是我在回答中所想的：-）虽然我距离实现HTML5还有一段距离，但我还没有看到

canvas

元素，我将继续探索。谢谢。编辑以提供jQuery插件。