如屏幕截图所示，如何在中心放置文本并在其周围放置图像？（附图片）[关闭]答案

【问题标题】：How to have text in center and image around it as shown in screenshot? (Image attached) [closed]如屏幕截图所示，如何在中心放置文本并在其周围放置图像？（附图片）[关闭]
【发布时间】：2016-11-15 04:25:49
【问题描述】：

我正在使用 Bootstrap 框架将 Illustrator 设计转换为 HTML 和 CSS。我被困在如下所示的设计部分：

我想要上面显示的被图像包围的文本。我可以单独拥有这些图像，也可以拥有一个图像，因为我可以根据要求从 Illustrator 导出这些图像。如果需要，我还可以导出 SVG 图像。完成此任务的最佳方法是什么。

【问题讨论】：

拥有一张图片是您的最佳选择。然后你只需要相应地定位文本。
我将如何确保内容不会与图像重叠，因为内容稍后可以是动态的。
通过设置特定的宽度。 @哈里斯艾哈迈德
我要试试。谢谢@NickRameau
顺便推荐你使用响应式框架。 @哈里斯艾哈迈德

标签： html css svg

【解决方案1】：

使用 CSS，您可以将图像显示为 background-image 的 <div>并在同一 <div> 内调整标题和标题的位置。

标记：

<div>
<h2>We Only Work With the Best</h2>
<p>We screen our coders&#39; social profiles like LinkedIn, GitHub and StackOverflow. After that, we only expose them to smaller tasks until they build up their reputation.</p>
</div>

样式：

div {
text-align: center;
background-image: url('/work-with-the-best.png') no-repeat;
}

div h2 {
margin-top: 200px;
}

【讨论】：

如果我的内容需要是动态的并且它不应该与图像重叠而是环绕它怎么办。有没有办法使用 css background-image 属性来做到这一点？
我不确定我是否能想象出您所描述的内容。你能描述一个环绕图像的动态内容的例子吗？谢谢。
我要把它转换成 WordPress 主题。我的意思是，如果我从后端更改内容并添加一些不应该与图像重叠的文本。

【解决方案2】：

也许用相对定位文本并添加一个 z-index 使其位于图像上方。

【讨论】：