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伪类和父元素的背景图也能神奇的叠加在了一起!


任天镗
12 声望2 粉丝