CSS：在图像上叠加文字

这个例子来自我正在使用 HTML/CSS 和原生 JavaScript 构建的个人网站的移动版本。

要将一个元素叠加到另一个元素之上，我们首先需要了解z-index。

Z 指数

z-index是一个 CSS 属性，用于设置堆栈中元素的顺序。

• 仅适用于定位方式非静态（默认定位）的元素。定位方式可以是绝对定位、相对定位、固定定位或粘性定位。

假设你的电脑屏幕是背面，现实世界是正面，而你应用中所有没有指定 z-index 的元素都是默认图层。如果你想把某个元素放到最底层，z-index 的值要小于 0。数值最小的元素会被放到最底层。如果你想把一个元素放在默认图层之上，则需要使用正数。数值越大，元素就越靠近最底层。

• 元素按升序排列。

• 默认层等于z-index: 0。

• z-index 的负值会将元素置于默认图层之后。

• z-index 值最小的元素将被置于最底层。

• 正值会将元素置于默认图层之上。

• 数字最大的元素会排在最前面。

例子

在这里，我通过将图层值设置为 -1 将图像置于底层z-index。我不需要z-index为文本指定值，因为它默认位于图层 0，而图层 0 位于图层 -1 之上。

在CodePen上查看！免责声明：我没有将此 CodePen 设置为响应式，因此它仅在桌面端显示效果良好。

操场

这里有一个在codepen或repl.it上的示例程序，供您进行实验。