background-blend-mode能将两种背景图混色在一起,如下:
`div {
background-image: url('xxx'), linear-gradient(90deg,#ecf9ff,#f5fcff);
background-blend-mode: multiply;
}`
你会发现两张背景神奇的叠加在了一起!
mix-blend-mode用法
<div></div>
div {
background-image: url('xxx');
}
div::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg, #ecf9ff, #f5fcff);
mix-blend-mode: multiply;
pointer-events: none;
}
你会发现before伪类和父元素的背景图也能神奇的叠加在了一起!
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。