覆盖图像的目标文本

Question

我尝试了几个小时来让这个悬停图像使其顶部的文本显示为白色而不是黑色，但我无法弄清楚。

我尝试了几种混合模式，最好的方法是让所有文本显示为白色，但我只想将文本定位在图像上。

我正在处理的页面是这样的：https://staging.gilreyesdesign.com/

非常感谢！

这是我正在使用的风格：

<style>
/* .txt-box:hover p:not(a) {
    color: white;;
} */

.container-items {
    position:relative;
    bottom: 0;
    width: 100%;
    height: 300px;
    display: flex;
    align-items: center;
    cursor: pointer; }

.container-img-wrap {
    position: absolute;
    top: -43rem;
    left: -25rem;
    width: 250px;
    height: 300px;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden; }

.container-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;}

</style>

这是我正在使用的脚本：

    <script>
const allcontainer = gsap.utils.toArray(".container-item");
const venueImageWrap = document.querySelector(".container-img-wrap");
const venueImage = document.querySelector(".container-img");

function initcontainer() {
            allcontainer.forEach((link) => {
                link.addEventListener("mouseenter", venueHover);
                link.addEventListener("mouseleave", venueHover);
                link.addEventListener("mousemove", moveVenueImage);
            });
        }
        
function moveVenueImage(e) {
            let xpos = e.clientX;
            let ypos = e.clientY;
            const tl = gsap.timeline();
            tl.to(venueImageWrap, {
                x: xpos,
                y: ypos,
            });
        }

function venueHover(e) {
            if (e.type === "mouseenter") {
                const targetImage = e.target.dataset.img;
                
const tl = gsap.timeline();
                tl.set(venueImage, {
                    backgroundImage: `url(${targetImage})`,
                }).to(venueImageWrap, {
                    duration: 0.5,
                    autoAlpha: 1,
                });
            } else if (e.type === "mouseleave") {
                const tl = gsap.timeline();
                tl.to(venueImageWrap, {
                    duration: 0.5,
                    autoAlpha: 0,
                });
            }
        }

function init() {
            initcontainer();
        }

        window.addEventListener("load", function () {
            init();
        });

        tl = new TimelineMax();

    </script>

Answer 1

z-index 应该可以解决问题，并且您在创建对比度的正确轨道上。检查我的回复 cmets。

container-img-wrap {
  z-index: 9999;
  mix-blend-mode: difference;
  filter: invert(1);
}

或者您可能需要通过为文本添加边框来添加一些对比度。

.container-img-wrap {
    /*z-index: 9999;
    mix-blend-mode: difference;
    filter: invert(1);*/
}

.elementor-widget-text-editor {
    text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;;
}