CSS实现文字镂空成果炫酷背景成果
css3中的mix-blend-mode
css3中有一个mix-blend-mode的screen混合模式，能够轻松实现镂空文字效果。背景咱们能够固定定位设置一个动态图片，gif动态图，视频video，svg动画等等。
代码案例
<!DOCTYPE html><html ><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> body { margin: 0; padding: 0; } .test-title { width: 100vw; height: 100vh; background: #ffffff; /*要害加了背景色能力混合*/ text-align: center; font-size: 100px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-weight: 800; position: absolute; margin: auto; top: 0; z-index: 1; padding-top: 20%; mix-blend-mode: screen; /*要害 screen混合模式*/ }</style><body> <!--video视频做动静炫酷背景--> <video style="width: 100%;" src="./testvideo.mp4" loop autoplay muted="muted"> </video> <div class="test-title"> Hello World Hello World Hello World </div></body></html>