文字可以环绕不规则形状的图像吗？

文本可以环绕非矩形图像吗？

将文本环绕非矩形图像是网页设计中的常见挑战。考虑这样的情况：您有不同国家/地区的地图，并且您希望文本环绕该国家/地区的形状，与边界保持一致的距离。有可能实现这一点吗？

解决方案

是的，可以使用 Tory Lawson 在其 2011 年概述的技术将文本包裹在非矩形图像周围博客文章“将文本环绕非矩形形状”。此方法涉及浮动 div 来遮挡形状区域：

第 1 步：定义环绕区域

• 确定文本和图像边框之间所需的距离。
• 在编辑程序中打开图像并覆盖网格。
• 绘制一个表示文本应结束位置的边界形状，考虑填充（例如 5 像素）。

第 2 步：创建宽度测量列表

• 测量固定间隔的包裹区域的宽度（例如，每 10像素）。
• 将这些测量值记录在一张纸上。

第 3 步：创建 Div

• 创建一个 div充当图像和文本的包装器。
• 为每个宽度创建额外的 div

CSS

#wrapper { 
   width: [image width];
   height: [image height];
   display:block;
   background-image:url("[image path]");
}
.spacer{
   display:block;
   float:right;
   clear:right;
}
p {
   display:inline;
   color:#FFF;
}

注意： 这种方法并不像使用 CSS“文本换行”那么简单选项，但它允许精确控制文本换行行为。

以上是文字可以环绕不规则形状的图像吗？的详细内容。更多信息请关注PHP中文网其他相关文章！