CSS样式对一张包含很多小图片的背景图片 进行分隔处理 得到其中一张图
2015-08-18 15:22
225 查看
在开发中我们会见到这种现象,一张背景图片中有包含很多小图标,有时候我们只需要其中的某一个,这就需要我们利用css中的
background-position:参数1 参数2 属性控制背景图片的显示位置
第一个是水平位置,第二个是垂直方向的位置
比如这张图片,所有图标的定位:
注意:windows自带的画图软件就可以实现查找坐标,因为css背景是通过坐标来截取位置,还有Photoshop也可以实现
background-position:参数1 参数2 属性控制背景图片的显示位置
第一个是水平位置,第二个是垂直方向的位置
比如这张图片,所有图标的定位:
.page .page_icon{background: url(/Image/icon/page.png) no-repeat left top;width: 22px;height: 22px;display: inline-block;position: relative;margin-right: 20px} /*第一行每个小图片的定位*/ .page .first{background-position: 0 0;} .page .pre{background-position:-22px 0 ;} .page .next{background-position:-44px 0;} .page .last{background-position:-72px 0;} /*第二行每个小图片的定位*/ .page .first2{background-position: 0 -22px;} .page .pre2{background-position:-22px -22px;} .page .next2{background-position:-44px -22px;} .page .last2{background-position:-72px -22px;}
注意:windows自带的画图软件就可以实现查找坐标,因为css背景是通过坐标来截取位置,还有Photoshop也可以实现
相关文章推荐
- 常见的IE6兼容以及css兼容
- 签到日历升级美化版包含css
- 浅谈CSS3 Filter的10种特效
- dataGridView的样式设置
- css -- 运用@media实现网页自适应中的几个关键分辨率
- animate方法只适用于使用数值设置的css属性
- 安装Sass和Compass
- CSS3 grayscale滤镜图片变黑白
- CSS3选择器的性能比较
- 使用CSS3中的box-flex功能实现垂直等高、水平均分、比例划分布局
- 如何解决inline-block元素的空白间距 css 完美解决
- 如何解决inline-block元素的空白间距 css 完美解决
- OpenStack J版 CSS详解与修改
- CSS3学习笔记(3)-CSS3边框
- CSS效果
- html+css下拉菜单
- 常用css总结
- 基本样式的显示
- <转载>使用css让大图片不超过网页宽度
- <转载>DIV+CSS position定位方法总结