修改

Question

通常作为网络制作人，我会得到一个可爱的模型，文字环绕着明显的背景图像。内容将来自后端CMS，我不希望编辑人员担心插入<br />标签等。

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自动化这种事情的解决方案？

Answer 1

A List Apart前一段时间做了一篇文章。它不是完全交钥匙，但它们会告诉你如何在PHP中完成它而不会有太多麻烦。

Answer 2

如果你绝对不得不做这个浏览器端，并且你希望它尽可能接近'像素完美'（就指定像图像形状周围的精确边距这样的东西而言），你可能需要使用HTML 5的<canvas>功能。然后，您需要进行一些“基本”图像处理：

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

在图像上运行edge-detection算法（可能是Sobel算法，因为它的简单性和速度）可以找到边框。或者，如果您可以保证图像具有纯色背景，则可以选择仅针对该背景颜色阈值图像，以从背景中获取图像主体的segmentation。
根据您的line-height，迭代图像的行，找到图像边框到图像主题（我们分割的部分）开头的最大距离。
1. 取出最大值并从图像的总宽度中减去它，以获得距图像右侧的距离。
2. 将此宽度推送到数组arr。

在包含您的文字的DOM节点的开头，添加arr.length <div>个节点，每个节点都有

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

修改

我为这项技术编写了一个jQuery插件，您可以在plugins.jquery.com或http://jwf.us/projects/jQSlickWrap

Answer 3

哎呀，很难。假设你的图像在左侧是透明的，我能想到的最接近的是找到透明像素的脚本，并且 - 在一定程度的细节上 - 生成一组浮动div，它们覆盖图像并保持文字不碍事。

Answer 4

您是在谈论任意背景图像还是固定背景图像？如果你想用任何旧的背景来做，那么你正在做一些严肃的像素扫描，这几乎肯定会发生在服务器端，可能不值得你花时间。你最好只是将文字烘焙到图像中。

如果您只想为单张图片拍摄，那么您的选择会变得更好，但仍然不是很漂亮。首先想到的是使用等宽字体，测量每行可以容纳多少个字符，然后根据该字符串在适当的字符串位置插入js函数插入。

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

4 个答案:

修改