html - 在文本和图像上混合混合模式

Question

我已经接近我想要实现的目标。我想仅在文本和图像重叠时应用混合模式。现在它正在做我想要的。但是，我希望图像保持没有效果，只是让文本和图像混合。`

    <div id="fullpage">
    <div class="section" id="one">
        <p class="name">Tyler Owens</p> <p class="info">Graphic Design</p> 
    </div>

    <div class="section" id="two">
        <div class="scrollable-content">
            <div class="header">
            <p class="name1">Tyler Owens</p> 
            <p class="information">Information</p> 
            <p class="work" >Non-Work</p> 
            <p class="work1" >Work</p> 
            </div>
            <div class=grid2>
            <img class="artekbook1" src="img/artek_book.png" alt=""> 
            <img class="programbook1" src="img/programbook2.png" alt="">
            <img class="postershow" src="img/postershow.png" alt="">
            </div>
            </div>
        </div>
    </div>

目前我正在调用 mix-blend-mode:difference; 在grid2上

结果截图

感谢您的任何帮助

Answer 1

混合模式将当前图层与其下面的图层混合。
在您的情况下，您设置的混合模式将图像与页面的白色背景混合，因此图像变为负片。

尝试将混合模式应用于 .header 而不是 .grid2 以将您的铭文与它们下方的图像混合。