时间戳

首页 > 解决方案 > 覆盖图像的目标文本

jquery - 覆盖图像的目标文本

问题描述

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

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

我正在处理的页面是这样的：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>

标签： jquerycsshoverstylesoverlay

解决方案

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

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;;
}

推荐阅读