相关介绍链接:
CSS3中的mix-blend-mode和background-blend-mode
css mix-blend-mode 混合模式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*mix-blend-mode:difference不能和html,body标签的背景图或者背景色产生混合效果。*/
div {
background-color: #000;
text-align: center;
background-image: linear-gradient(90deg,#fff 49.9%,#000 50%);
}
h1{
font-size: 10vw;
color:#FFF;
mix-blend-mode:difference;
}
</style>
</head>
<body>
<div><h1>HELLO</h1></div>
</body>
</html>