我在这个项目中同时使用daisyUI和Tailwind。我想在这里针对一个特定的文本，在这个例子中，单词'developer'：

我想要一些类似于2015 XOXO festival webpage中的形状的东西。
我试过只使用mix-blend-difference，但它不起作用，可能是因为它正在查看直接的父元素。

<div class="flex flex-col min-h-screen" style="background-image: url(&quot;/src/images/mesh-gradient.png&quot;);">
   <div class="flex flex-1 flex-col base-100 text-base-content">
      <div class="hero bg-transparent h-96">
         <div class="hero-content text-center">
            <div class="max-w-md">
               <h1 class="text-5xl font-bold">
                  <div>Hi, I'm Anon,</div>
                  <div>a <span class="mix-blend-difference">developer</span></div>
               </h1>
            </div>
         </div>
      </div>
   </div>
</div>

我非常肯定这是错误的，但我也尝试过堆叠多个mix-blend-difference，从直接子元素开始到嵌套元素：

<div class="flex flex-col min-h-screen" style="background-image: url(&quot;/src/images/mesh-gradient.png&quot;);">
   <div class="flex flex-1 flex-col base-100 text-base-content">
      <div class="hero bg-transparent h-96 mix-blend-difference">
         <div class="hero-content text-center mix-blend-difference">
            <div class="max-w-md mix-blend-difference">
               <h1 class="text-5xl font-bold mix-blend-difference">
                  <div class="mix-blend-normal">Hi, I'm Anon,</div>
                  <div class="mix-blend-difference"><span class="mix-blend-normal">a</span> <span class="mix-blend-difference">developer</span></div>
               </h1>
            </div>
         </div>
      </div>
   </div>
</div>