background-origin,clip
Posted lujieting
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于background-origin,clip的主要内容，如果未能解决你的问题，请参考以下文章
background-origin:规定 background-position 属性相对于什么位置来定位
background-clip和background-origin