cssbackground-position属性的用法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了cssbackground-position属性的用法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2331字，纯文字阅读大概需要4分钟。

内容图文

是用来定位图片的位置的。
最主要使用在 一张png 上有多个logo 或者 ico 这个时候就用到background-position了
background-position：x y x等于平行轴 y等于竖行轴。
x y的取值可以为正数，也可以是负数

div可以理解成一个矩形框，它的左上角是顶点，背景图片的顶点也是左上角，div加载背景图时，会把两个顶点重合，顶点的坐标是(0,0)。不理解的看图，很简单的。。。

+1的小图片混杂在大图中，想提取出来，需要用background-position属性，这个属性相当于大图片不动，把div的顶点进行移动，移动到目标小图的顶点位置，如下图：

这样一来，div中显示的就是小图了，但是，显示的还不仅仅是小图，而是图中阴影部分，怎么办呢？设置一下div的宽、高，让它和小图的宽、高一样就可以了呗！！

再来看看background-position属性，它有两个参数，分别是水平方向移动的像素、竖直方向移动的像素，都用负数表示。大图不动，div移动，也只能是向右、向下移动，只要记住这两个方向移动的像素都用负数表示就行了！

因此，只要找到小图相对于大图左上角顶点的水平移动像素、竖直移动像素就可以了。小菜也不用什么专业工具，用截图就很方便，从大图左上角顶点开始截，到小图顶点那停下来，一看像素就差不多了，然后再调试调试，基本就搞定。

在本例中，A小图的位移是：-25px -374px，A小图尺寸是：24px 16px。因此，css样式如下：

.btn{
    background:url(bg.png);
    background-repeat:no-repeat;
    background-position:-25px -374px;
    height:16px;
    width:24px;
}

效果如下：

这样就算是把小图抠出来啦！简单吧！！

先解释个问题，图片上有+1，而我又在超链上写了一个+1，这是因为很多时候文本内容不是写在图片上的，那样灵活性太差，文本就是文本，小菜为了给大家一个完整的演示，因此又写了一个+1，接下来就处理它！

先把+1居中，居中分为水平居中和垂直居中，水平居中超链接，需要在div上设置text-align:center;，这个属性是对子节点而言的；垂直居中div中的超链接，只需要把a标签的line-height属性设成和div的高度一样即可。样式如下：

.btn{
    background:url(bg.png);
    background-repeat:no-repeat;
    background-position:-25px -374px;
    height:16px;
    width:24px;
    text-align:center;
}
.btn a{
    line-height:16px;
}

效果如下：

这种技术有好处也有坏处，好处是由于图片都放在一起，请求时只需请求一张图片，减少了与服务器的交互次数，还可以解决hover延迟加载的问题。坏处就是不好控制，扩展性不太好，以后有改动，可谓是牵一发而动全身，而且有时会因为屏幕分辨率不同出现背景断裂现象。

以上就是css background-position属性的用法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的cssbackground-position属性的用法全部内容，希望文章能够帮你解决cssbackground-position属性的用法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端