如何将文本放置在图像中任何所需的位置?
我们在日常生活中遇到许多情况,我们希望在所需位置的图像上写入文本。在本文中,您将学习如何使用元素的定位在图像上写入文本。在进入这个概念之前,我们首先需要了解元素的位置定位通常意味着您希望您的元素出现在您的网站上的哪个位置。
定位有多种选择,例如static 、 relative 、 absolute 、 sticky等。所以在这里我们将使用 position 属性将文本放置在图像中。
句法:
position: static|absolute|fixed|relative|sticky|initial|inherit;
在本文中,您将了解在图像上写入文本所需的相对和绝对
- 相对定位:此方法用于给出元素相对于正常位置的位置。
- 绝对定位:在此方法中,元素相对于其定位的祖先进行定位(定位意味着祖先的位置不是静态的)*因为静态是默认定位。
原图:
例子:
Bottom Left
Top Left
Top Right
Bottom Right
Centered
输出: