非矩形图像
有没有办法在页面上放置非矩形区域的图像?例如,形状如下的图像:
____
| |
| | 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
像平常一样创建图像矩形,尺寸设置为包含您希望链接/文本/任何内容出现的区域,只需使链接/文本/任何内容的区域透明(或与背景颜色相同),然后创建像这样的 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:
(assuming your area for text/whatever is 150 pixels from the left, 50 pixels from the top of the image)
如果这是 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