使用isolation: isolate声明隔离混合模式

在CSS中，isolation 属性与混合模式（如 mix-blend-mode 和 background-blend-mode）并不直接相关，但它确实可以影响元素如何与其他元素进行渲染，尤其是在涉及到堆叠上下文（stacking contexts）和复合（compositing）时。然而，isolation: isolate; 的主要目的不是为了直接隔离混合模式，而是为了创建一个新的堆叠上下文，并可能改变元素的复合方式。

isolation 属性有两个值：auto 和 isolate。

• auto 是默认值，表示元素不会创建新的堆叠上下文，并且其复合方式遵循正常的CSS规则。
• isolate 创建一个新的堆叠上下文，这可能会影响到元素的渲染顺序和复合方式。然而，它并不直接控制混合模式的行为。

尽管 isolation: isolate; 不直接隔离混合模式，但它可以通过改变堆叠上下文来间接影响元素的渲染方式，这可能会在某些情况下与混合模式产生交互。例如，当元素被设置为 isolation: isolate; 时，它可能会更独立地处理其内部的渲染和复合，这可能会影响到它如何与背景或其他元素混合。

然而，需要注意的是，isolation 属性对混合模式的影响并不是直接的，也不是为了专门隔离混合模式而设计的。它更多地是用于控制堆叠上下文和复合的边界。

如果你想要“隔离”混合模式的效果，你可能需要采取不同的策略，比如使用绝对定位或z-index来确保元素在视觉上被隔离，或者通过其他CSS属性（如opacity）来间接影响混合效果。但请记住，CSS中的混合模式是基于元素和它们的背景或兄弟元素之间的颜色混合，而不是通过isolation属性来直接控制的。