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; // 可以得到图片背景透明效果文章来源:https://www.toymoban.com/news/detail-666366.html
aspect-ratio
保持长宽比文章来源地址https://www.toymoban.com/news/detail-666366.html
.container {
width: 100%;
aspect-ratio: 16 / 9;
}
到了这里,关于CSS :mix-blend-mode、aspect-ratio的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!