background-origin,clip

 <style>
*{
padding: 0;
margin: 0;
}
/*提升移动端响应区域的大小*/
a{
width: 50px;
height: 50px;
display: block;
background-color: #ddd;
margin:100px auto;
box-sizing: border-box;

background-image: url("images/img/sprites.png");
/*设置背景偏移,参照background-origin原点,这个原点默认在容器的左上角*/
background-position: -20px 0;

/*添加padding*/
padding:14px;

/*设置背景坐标的原点
border-box:从border的位置开始填充背景,会与border重叠
padding-box:从padding的位置开始填充背景,会与padding重叠
content-box:从内容的位置开始填充背景*/
background-origin: content-box;

/*设置内容的裁切:设置的是裁切,控制的是显示
border-box:其实是显示border及以内的内容
padding-box:其实是显示padding及以内的内容
content-box:其实是显示content及以内的内容*/
background-clip: content-box;
}
</style>
</head>
<body>
<a href="#"></a>

猜你喜欢

转载自www.cnblogs.com/lujieting/p/10182581.html