覆盖图像的目标文本

Posted 2023-03-06

【中文标题】覆盖图像的目标文本

【英文标题】：Target text overlaying an image

【发布时间】：2021-06-08 22:14:16

【问题描述】：

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

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

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

【参考方案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;;

【讨论】：

我能够添加它，它确实可以让图像覆盖文本，但我无法让文本在下面变成白色。我尝试了混合模式，它工作了一点，但是当我停止鼠标时，弯曲模式会修改图像并停止修改文本。你可以在这里看到它：staging.gilreyesdesign.com/wp-content/uploads/2021/03/…

我不认为有办法用 CSS 做到这一点。您想根据照片的位置影响其他元素（文本）的字体颜色。此外，您不仅希望更改文本的单个字母，还希望更改每个字母的部分内容。也许使用画布和/或 SVG，但该算法会很复杂。给文本添加一个白色边框怎么样？