实例：background-position定位

最新推荐文章于 2023-06-08 18:08:02 发布

anyw3c

最新推荐文章于 2023-06-08 18:08:02 发布

阅读量620

点赞数 4

CC 4.0 BY-SA版权

分类专栏： css初级细节决定一切坚持就能达到自己想要的生活文章标签： css background-position

本文链接：https://blog.youkuaiyun.com/anyddm/article/details/89944238

css初级同时被 3 个专栏收录

3 篇文章

订阅专栏

细节决定一切

1 篇文章

订阅专栏

坚持就能达到自己想要的生活

1 篇文章

订阅专栏

博客以获取模板矢量图中灰色背景垃圾箱小图标为例，介绍了background-position定位的方法。先使用markman或Photoshop CC测量小图标大小，再在ps中测量从左上角顶点到图标左上角顶点的长和宽，经计算后填入定位代码即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实例：background-position定位

我们在写页面时经常会用到小图标，例如酱紫的[红色框内图标]!
此处输入图片的描述

我们使用的时候有的下载好是单个的矢量图，但是也有下载的是这样的模板矢量图!
此处输入图片的描述

场景：我们现在需要用到上图中灰色背景的垃圾箱小图标。
1.首先需要用工具量出小图标的大小，推荐工具是markman markman下载地址，和Photoshop CC，我这边测出长是17px，宽是15px
2.直接写定位

.pic-6 {
        width: 15px;
        height: 17px;
        background: url("images/toolbars.png") no-repeat 100% 100%;
        background-position: -48px -198px;
    }

网页内出来下图结果：
此处输入图片的描述
那么这里的 background-position如何得到是-48px和-198px；
我们在ps中可以测量到从左上角顶点到“垃圾桶图标”左上角顶点的长和宽

因为是在左上角顶点的右下方，所以要想找到“垃圾桶图标”必须是把量到的48px和198px减去，也就是 -48px -198px，
根据position-position：x y ；
我们填入进去就行了~ position-position：-48px -198px ；