背景裁切效果:background:url(Images/img.png) no-repeat -70px -50px;-webkit-background-clip:text; 必须先写背景图片,后加clip样式
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <style> body { width:1024px; margin:0 auto; } .box { width:964px; margin:0 auto; position:absolute; top:200px; left:200px; font-family:AArial,'Microsoft YaHei'; text-align:center; color:rgba(255,255,255,0.1); } .box1 { text-shadow:3px 3px 10px #000; } .box2 { background:url(Images/img.png) no-repeat -70px -50px;-webkit-background-clip:text; -webkit-transition:1s all ease; } h1 { font-size:140px; margin:0; } p { font-size:72px; margin:0; } .box2:hover { background-position:-70px -220px; } </style> </head> <body> <div class="box box1"> <h1>别了,青春!</h1> <p>www.qinchun.com</p> </div> <div class="box box2"> <h1>别了,青春!</h1> <p>www.qinchun.com</p> </div> </body> </html>