覆盖图像时如何更改字体样式？

Question

道歉含糊，但是当滚动时它覆盖图像时如何更改字体的部分？

请访问以下示例网站，以了解我的意思：https://mathieulevesque.com/en

以下是照片示例的链接：https://i.gyazo.com/343c49cfbfb269c047fc65ead6a48b89.png

我找不到任何有用的资源或教程，因为我不知道这种样式的名称

Answer 1

示例站点使用以下CSS来实现此类功能。

.className{
        z-index: 10;
        position: absolute;
        top: 0;
        left: 3.125rem;
        width: calc(100% - 200px);
        overflow: hidden;
        cursor: pointer;
        display: block;
}

但是，您可以正确实现目标设置显示，位置和 z-index 。

Answer 2

似乎巧妙地使用了两个相同文本的实例，并且图像位于两者之间。这是DOM和相关样式中的布局顺序：

1. 文本{颜色：黑色； }

2. 文本{颜色：透明； -webkit-text-stroke：2px白色； z-index：550}

3. 图片

请注意，z索引较高的Text的笔触与正文的白色背景匹配。