如何使Bootstrap轮播上的静态文本随背景改变颜色？

Question

起初，我想使轮播上的文本变为静态，这没花时间。但是，当我尝试更改带有背景图像的文本的颜色时，效果不佳。我正在与您共享代码以供参考。

$(document).ready(function () {
        
    $('#carousel').slick({
        dots: true,
        arrows: true,
        infinite: true,
        autoplay: false,
        autoplaySpeed: 5000,
        slidesToShow: 1,
        swipeToSlide: true,
        swipe: true,
        adaptiveHeight: false
    });

    $("#carousel").swiperight(function () {
        $("#carousel").carousel('prev');
    });
    $("#carousel").swipeleft(function () {
        $("#carousel").carousel('next');
    });

    $('.slider').each(function(){
        var slickInduvidual = $(this);
        slickInduvidual.slick({
            dots: true,
            arrows: true,
        });
    })
});

.main-text {
    position: absolute;
    top: 50px;
    width: 96.66666666666666%;
    color: #FFF;
}
        
.highlight {
    color: #ff5c5c;
}
        
#carousel .carousel-caption{
    top:36%;
    bottom:auto
}

#carousel .carousel-caption h2{
    font-size:3.5rem;
    font-weight:700;
    width:fit-content;
    margin:auto;
    color:#fff;
    padding:10px;
    padding-bottom:15px;
    text-shadow:2px 6px 5px #222
}

<div id="carousel" class="slider">
    <div class="carousel-item active blurred-box" style="background-image: url(/img/slider1.jpeg)">
        <div class="carousel-caption">
            <h2><span class="highlight">1</span>|2|3</h2>
        </div>
    </div>

    <div class="carousel-item blurred-box" style="background-image: url(/img/slider2.jpg)">
        <div class="carousel-caption">
            <h2>1|<span class="highlight">2</span>|3</h2>
        </div>
    </div>

    <div class="carousel-item blurred-box" style="background-image: url(/img/slider3.jpeg)">
        <div class="carousel-caption">
            <h2>1|2|<span class="highlight">3</span></h2>
        </div>
    </div>
</div>

<div class="main-text">
    <div class="col-md-12 text-center">
        <h2><span class="highlight">Travel</span>|Network|Grow</h2>
    </div>
</div>

我也想在'carousel-caption'类中有一个文本，但是要有静态文本。您知道如何解决这个问题吗？