CSS进阶-第十二篇：CSS 样式高级应用-背景与边框（一）：背景合成与混合模式

CSS进阶-第十二篇：CSS 样式高级应用-背景与边框（一）：背景合成与混合模式

在 CSS 样式设计中，背景合成与混合模式为我们打造独特且吸引人的背景效果提供了强大的工具。它们能够让背景元素以各种奇妙的方式相互作用，创造出令人眼前一亮的视觉体验。接下来我们将深入探讨这两个方面的内容。

1. 背景合成属性

background-composite 属性取值及叠加方式

background-composite 属性决定了多个背景层之间的叠加方式，它有以下几种取值：

• add：这种叠加方式会将各个背景层的颜色值相加。例如，若一个背景层是红色（rgb(255, 0, 0)），另一个背景层是绿色（rgb(0, 255, 0)），在 add 模式下叠加，最终显示的颜色会接近黄色（rgb(255, 255, 0)），因为红色和绿色的颜色值相加。这种模式通常会使背景颜色变得更亮，适用于创建发光或强调的效果。

• atop：在 atop 模式下，上方的背景层会覆盖下方背景层，但下方背景层中与上方背景层透明部分对应的区域仍会显示。例如，若上方背景层是一个带有透明度的圆形，下方是一个纯色背景，那么圆形区