效果

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;屬性是用來(lái)設(shè)置元素的混合模式的。當(dāng)設(shè)置為difference時(shí)，它會(huì)使得該元素和它的背景（或下面的元素）的顏色相混合，從而產(chǎn)生差異效果。

在這種模式下，混合的顏色是通過(guò)比較上下層的顏色值然后從較高的顏色值中減去較低的顏色值來(lái)得出的。這個(gè)過(guò)程是分別對(duì)紅、綠、藍(lán)三個(gè)顏色通道進(jìn)行的。這種混合方式通常會(huì)產(chǎn)生一些有趣和出人意料的視覺(jué)效果，特別是當(dāng)混合顏色的亮度相差較大時(shí)。

例如，如果你將一個(gè)白色文本放置在黑色背景上，并應(yīng)用mix-blend-mode: difference;，文本的顏色會(huì)變成黑色，因?yàn)榘咨?255, 255, 255)和黑色(0, 0, 0)混合后的差異是255，從白色的255減去0得到的還是255，但由于是差異模式，所以顏色反轉(zhuǎn)，變?yōu)楹谏?/p>

這個(gè)樣式在藝術(shù)和創(chuàng)意設(shè)計(jì)中非常有用，可以用來(lái)創(chuàng)造獨(dú)特的視覺(jué)效果或是處理圖像。