.pic {     position: relative;     width: 100%;     height: 100%;     background: url($img);     background-repeat: no-repeat;     background-size: cover; } .text {     position: absolute;     width:100%;     height:100%;     color: #000;     mix-blend-mode: lighten;     background-color: #fff; }

方法二、-webkit-background-clip:text;

使用了这个属性的意思是，以区块内的文字作为裁剪区域向外裁剪，文字的背景即为区块的背景，文字之外的区域都将被裁剪掉。

    image