mix-blend-mode
mix-blend-mode 属性，用于一个元素的内容和其背景或兄弟内容之前颜色的混合模式；
混合模式大概有以下几种
-
normal：正常，不进行混合； -
multiply：相乘，元素乘以背景并替换背景颜色，生成的颜色始终与背景一样暗； -
overlay：叠加，根据背景颜色对内容进行倍增或屏蔽，这与硬光混合模式相反； -
screen：屏幕：将背景和内容相乘，然后补充结果。内容比背景颜色更亮； -
darken：变暗；当内容变暗时，背景将被替换为内容，否则将保持原样； -
lighten：变亮：背景被替换为内容较亮的内容； -
color-dodge：颜色变淡：此属性使背景颜色变亮，以反映内容的颜色； -
color-burn：颜色变淡：这会使背景变暗，以反映内容的自然颜色； -
hard-light：硬光：根据内容的颜色，此属性将对其进行筛选或倍增； -
soft-light：柔光：根据内容的颜色，这会使其变暗或变亮； -
difference：差值：这将从最亮的颜色中减去两种颜色中较深的一种； -
exclusion：排除：与差值相似，但对比度较低； -
hue：色调：通过内容的色调与背景的饱和度和亮度相结合来创建颜色； -
saturation： 饱和度：通过内容的饱和度和背景的色调和亮度来创建颜色； -
color：颜色混合：根据内容的色调和饱和度以及背景的亮度创建颜色； -
luminosity： 光度：根据内容的光度和背景的色调和饱和度创建颜色。这与颜色属性相反；
用的时候试试，选择最喜欢的效果用就行；
例子
用视频作为背景展示文字看起来非常高大上！ demo: https://⭐️shiroi.⭐️netlify⭐️.app/gallery/video-mask-text/dist/
栗子
<body>
<video autoplay="" muted="" loop="" preload="" poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/oceanshot.jpg">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ocean-small.webm">
<source src="http://thenewcode.com/assets/videos/ocean-small.mp4">
</video>
<h1>ocean</h1>
</body>
body{
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
overflow: hidden;
}
video{
object-fit: cover;
}
h1{
font-size: 20vw;
font-weight: 700;
line-height: 100vh;
text-align: center;
background: white;
mix-blend-mode: screen;
}
