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;
}