Document
div{
width:100px;height:100px;padding:30px;margin:50px auto;
background:url(img/2.jpg) no-repeat;
border:50px solid rgba(0, 0, 0, 0.2);display:inline-block;
}
div:nth-child(1){background-clip:border-box;}/*border以外的图像被裁掉*/
div:nth-child(2){background-clip:padding-box;}/*padding以外的图像被裁掉*/
div:nth-child(3){background-clip:content-box;}/*content以外的图像被裁掉*/
/*使用图片作为文字的填充色效果*/
div:nth-child(4){
font-size: 40px;font-weight: bold;
/*下面两句代码必须同时出现,才能达到效果*/
-webkit-text-fill-color: transparent;
-webkit-background-clip:text;
}
图片裁切
一键复制
编辑
Web IDE
原始数据
按行查看
历史