效果

image.png

          className={classNames(
            "absolute z-10 flex h-6 cursor-pointer gap-2 mix-blend-difference",
            "right-1 top-1 justify-end",
            iconClassName,
            onExpand && onLink ? "w-14" : "w-6"
          )}
        >
          {onExpand && (
            <Expand03
              className="actionable-item-with-hover text-passes-light"
              onClick={onExpand}
              size={IconSize.sm}
            />
          )}
          {onLink &&
            (linkIcon === LinkIconEnum.MESSAGE ? (
              <LinkToMessage
                className="actionable-item-with-hover text-passes-light"
                onClick={onLink}
                size={IconSize.sm}
              />
            ) : (
              <LinkToPost
                className="actionable-item-with-hover text-passes-light"
                onClick={onLink}
                size={IconSize.sm}
              />
            ))}
        </div>

CSS中的mix-blend-mode: difference;属性是用来设置元素的混合模式的。当设置为difference时，它会使得该元素和它的背景（或下面的元素）的颜色相混合，从而产生差异效果。

在这种模式下，混合的颜色是通过比较上下层的颜色值然后从较高的颜色值中减去较低的颜色值来得出的。这个过程是分别对红、绿、蓝三个颜色通道进行的。这种混合方式通常会产生一些有趣和出人意料的视觉效果，特别是当混合颜色的亮度相差较大时。

例如，如果你将一个白色文本放置在黑色背景上，并应用mix-blend-mode: difference;，文本的颜色会变成黑色，因为白色(255, 255, 255)和黑色(0, 0, 0)混合后的差异是255，从白色的255减去0得到的还是255，但由于是差异模式，所以颜色反转，变为黑色。

这个样式在艺术和创意设计中非常有用，可以用来创造独特的视觉效果或是处理图像。