CSS :mix-blend-mode、aspect-ratio

mix-blend-mode

元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

mix-blend-mode: normal; // 正常mix-blend-mode: multiply; // 正片叠底mix-blend-mode: screen; // 滤色mix-blend-mode: overlay; // 叠加mix-blend-mode: darken; // 变暗mix-blend-mode: lighten; // 变亮mix-blend-mode: color-dodge; // 颜色减淡mix-blend-mode: color-burn; // 颜色加深mix-blend-mode: hard-light; // 强光mix-blend-mode: soft-light; // 柔光mix-blend-mode: difference; // 差值mix-blend-mode: exclusion; // 排除mix-blend-mode: hue; // 色相mix-blend-mode: saturation; // 饱和度mix-blend-mode: color; // 颜色mix-blend-mode: luminosity; // 亮度mix-blend-mode: initial;mix-blend-mode: inherit;mix-blend-mode: unset;

 PS： mix-blend-mode: multiply;    // 可以得到图片背景透明效果

aspect-ratio 

 保持长宽比

.container {width: 100%;aspect-ratio: 16 / 9;
}