如何用图像修复文本

Question

我正在进行我的在线投资组合网站，我有一个快速响应的问题（我总是有反应问题，讨厌这个问题）。

这就是我希望我的网站在所有屏幕分辨率中看起来像： https://s3.amazonaws.com/f.cl.ly/items/0W3k3Y0C3L2O2m2J2P1I/resolution2.jpg

问题是，正如您所知，当我使用Bootstrap在html中编码时，大文本（设计师，无论如何）都会在右侧覆盖我，具体取决于屏幕尺寸。

如何“修复”图像中的文字，这样无论屏幕尺寸如何，文字始终保持在图像的同一位置？

Answer 1

<img>标记没有在其上添加文字的选项。

您可以将图像用作背景并添加文字。您可以使用<div>标记来实现此目的。如下所示：

<div class="imageContainer">Some Text</div>

使用css background-image属性显示图像

.imageContainer {

       background-image: url(locationoftheimage);
 }

对于较小的区域，如果需要，您可以将图像作为链接。例如，您的菜单包含Home，About等链接。

制作一个小image like this

代码就像这样：

<a href="home"><img src ="url_of_Image"></a>