非矩形图像

发布于 2024-12-01 10:31:56 字数 270 浏览 0 评论 0原文

有没有办法在页面上放置非矩形区域的图像?例如,形状如下的图像:

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

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

Is there a way to place an image with a non-rectangular area on a page? For instance, an image shaped like so:

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

I realize one could use absolute positioning and simply place the text over the whitespace in the image, but I'd rather avoid that solution.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

懒猫 2024-12-08 10:31:56

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

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

假设您的文本/其他区域距左侧 150 像素,距图像顶部 50 像素)

Create your image rectangular as normal, with the dimensions set to encompass the area where you want your links/text/whatever to appear, and just make the link/text/whatever's area transparent (or the same color as your background), then create a div like so:

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

(assuming your area for text/whatever is 150 pixels from the left, 50 pixels from the top of the image)

纵性 2024-12-08 10:31:56

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

If this is in HTML then I don't believe this is possible other than to use the solution you already suggested.
Or butcher your image and use this solution:
http://meyerweb.com/eric/css/edge/raggedfloat/demo.html

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文