背景切割
-webkit-background-clip:text; 将文本内容下的背景切下,
只保留文本内容下的背景,其他丢掉,配合透明色,可实现酷炫效果
-webkit-background-clip:border-box; 留下边框以内的背景
-webkit-background-clip:padding-box; 留下内边距以内的背景
-webkit-background-clip:content-box; 留下内容区域背景
内核:
代码示例:
<html>
<head>
<meta charset="utf-8"/>
<title></title>
<style type="text/css">
div{
width:400px;
background-color: red;
height:400px;
border:solid 30px orange;
background-image:url(img/灭霸.jpg);
margin:30px auto;
padding:200px;
font-size:50px;;
color:transparent;
-webkit-background-clip: padding-box;
}
body:hover div{
width:220px;
}
</style>
</head>
<body>
<div>
王者荣耀
</div>
</body>
</html>