混合混合模式 CSS 所有属性 - CSS

CSS 混合混合模式是一种用于控制两个或多个不同元素之间的混合效果的方法。它允许您将两个或多个元素重叠，并用不同的模式混合它们的颜色和透明度，从而创建出令人惊叹的效果。

CSS Mix Blend Mode 属性

CSS Mix Blend Mode 属性用于定义元素之间的混合模式，语法如下：

mix-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity|difference|exclusion|hue|saturation|color|luminosity;

• normal：正常模式
• multiply：将混合的元素颜色和底层元素的颜色相乘
• screen：将混合的元素颜色和底层元素的颜色进行反相相乘
• overlay：使用 Multiply 和 Screen 的混合模式来定义最终颜色
• darken：选取最暗的颜色
• lighten：选取最亮的颜色
• color-dodge：增强亮度
• saturation：减少饱和度
• color：保留底层元素的色调，并应用混合元素的饱和度和亮度
• luminosity：保留底层元素的饱和度和色调，并应用混合元素的亮度
• difference：选取差异最大的颜色
• exclusion：减小亮度并增加对比度
• hue：保留底层元素的亮度和饱和度，并应用混合元素的色调
• saturation：保留底层元素的亮度和色调，并应用混合元素的饱和度
• luminosity：保留底层元素的饱和度和色调，并应用混合元素的亮度

CSS Background Blend Mode 属性

CSS Background Blend Mode 属性用于定义背景的混合方式。它使用的语法与 CSS Mix Blend Mode 属性相同，只不过它只能应用于背景。语法如下：

background-blend-mode: normal|multiply|screen|overlay|darken|lighten|color-dodge|saturation|color|luminosity|difference|exclusion|hue|saturation|color|luminosity;

CSS Filter 属性

CSS Filter 属性用于对元素进行图形效果滤镜处理，可以改变图像的颜色、亮度、对比度、透明度等特性。该属性包含多个子属性，如下所示：

filter: blur(5px) brightness(50%) contrast(200%) drop-shadow(5px 5px 5px #000000) grayscale(100%) hue-rotate(90deg) invert(100%) opacity(50%) saturate(200%) sepia(100%);

• blur()：模糊效果
• brightness()：亮度
• contrast()：对比度
• drop-shadow()：阴影效果
• grayscale()：灰度效果
• hue-rotate()：色相旋转
• invert()：反色
• opacity()：透明度
• saturate()：饱和度
• sepia()：棕褐色效果

CSS Mask 属性

CSS Mask 属性用于创建遮罩效果，它基于将一个元素的内容和另一个元素合并，以创建一个有效的遮罩。

mask-image: url("mask.png");
mask-type: luminance;
mask-repeat: no-repeat;
mask-position: center center;
mask-size: cover;

• mask-image：定义遮罩图像
• mask-type：定义遮罩类型
• mask-repeat：定义遮罩图像的重复
• mask-position：定义遮罩图像的位置
• mask-size：定义遮罩图像的大小

CSS Clip-path 属性

CSS Clip-path 属性是一种从给定形状裁切元素的方法。它可以用于创建复杂的网络背景，裁剪图像和添加现代的视觉效果。

clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);

• clip-path：定义如何切割制定元素

以上就是 CSS 混合混合模式的 CSS 所有属性。 使用这些属性可以创建各种不同的视觉效果，使您的网站更加动态和现代化。