Question

有没有办法在页面上放置一个非矩形区域的图像？例如，形状如此的图像：

   ____
  |    |
  |    |  Place links, etc. here
  |    |_________________________
  |                              |
  |______________________________|

我意识到可以使用绝对定位并简单地将文本放在图像中的空白处，但我宁愿避免使用该解决方案。

Answer 1

正常创建图像矩形，尺寸设置为包含您希望链接/文本/任何内容出现的区域，只需使链接/文本/任何区域透明（或与背景颜色相同），然后像这样创建一个div：

  <div style="background: url('yourimage.png') no-repeat;  padding-left: 150px; padding-top: 50px;">Links and text go here</div>

（假设你的文字区域是左边150像素，距离图像顶部50像素）

Answer 2

如果这是HTML格式，那么除了使用您已建议的解决方案之外，我不相信这是可能的。或者屠宰你的形象并使用这个解决方案： http://meyerweb.com/eric/css/edge/raggedfloat/demo.html

非矩形图像

2 个答案: