居中图像而文本覆盖画布（左和右）

Posted 2023-05-07

【中文标题】居中图像而文本覆盖画布（左和右）

【英文标题】：centering an image while text covers both canvas (left and right)

【发布时间】：2015-01-05 21:19:12

【问题描述】：

我有这样一个简单的文字，内容中间有图片：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua。 Ut enim 广告 minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat。 <img src="img/foo.png" /> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur。 Exceptioneur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est labourum。

我想要的是文本在左边，右边，而图像完全覆盖在中心。看来我可以使用浮动，效果很好，但只能向左或向右。

有没有办法用 css 实现这一点，没有任何黑客？

【问题讨论】：

试了很久，现在放弃了。我认为这个问题应该引起很多关注

也许添加你的 CSS 和 html。

【参考方案1】：

您想要实现的是 HTML5 和 CSS3 中非常新的东西，称为 CSS 形状，允许文本环绕图像和形状。您可以通过以下链接查看如何实现此目的http://www.html5rocks.com/en/tutorials/shapes/getting-started/ 但缺点是它仅在非常现代的浏览器中受支持。