CSS mix-blend-mode用于指定一个元素与它下面元素的相交部分的混合模式
当两个元素相互重叠的时候，它们之间会有一个相交的区域，这个区域称为backdrop
backdrop.jpg
mix-blend-mode属性的初始值为normal。
示例代码
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;
案例
<template>
<div>
<div class="container">
<img src="@/components/views/group/abc.jpg" />
</div>
<div class="overlay">
<div class="spotlight"></div>
</div>
<div>
</template>
<style lang="scss" scoped>
.container {
position: relative;
img {
width: 500px;
height: 666px;
}
}
.overlay {
width: 500px;
height: 666px;
background-color: rgba(0, 0, 0, 0.5);
mix-blend-mode: hard-light; // *****关键代码 设置混合类型
position: absolute;
left: 0;
top: 0;
.spotlight {
width: 200px;
height: 200px;
position: absolute;
top: 10%;
left: 40%;
background-color: gray; // *****关键代码 必须是灰色 混合出来才是透明
}
}
</style>
image.png
