达到背景颜色后如何更改文本颜色

Question

我有一个标题为白色的标头。页面上有一半背景图片，其余一半是白色，即3张卡片，背景图片2张，白色背景1张。一旦标题到达白色背景，标题必须将其颜色更改为黑色。

$bg-color: white;
$white : #fff;
$black : #000;

.heading{
    text-align: center;
    font-size: 40px;
    font-weight: 500;
    color:$white;
}


@function set-text-color($color) {
    @if (lightness( $color ) > 50) {
        @return $black; // Lighter color, return black
    }

    @else {
        @return $white; // Darker color, return white
    }
}

.text--color {
    background:$bg-color;
    color: set-text-color($bg-color);
}

我不知道我要去哪里。我知道我做错了，但无法弄清楚。请让我知道我是否需要使用CSS的js窗口属性。