背景图片等比缩放的写法background-size简写法
2016-06-29 11:34
288 查看
1、背景图片或图标也可像img一样给其宽高就能指定其缩放大小了。
比如一个实际宽高36*28的图标,要缩小一半引用进来的写法就是:
background:rgba(0, 0, 0, 0) url("../images/report_icon@2x.png") no-repeat scroll left center / 18px 14px;
//left center是图标定位,/后面的18px 14px是指定背景图标应用的大小,原图标大小是36px 28px 这样指定大小为18*14的写法就可以起到类似img中的等比缩放效果
注意:单个图片可以用left center来左上角定位
2、另一种写法:
.tag-icon {
background: rgba(0, 0, 0, 0) url("../images/website_icon@2x.png") no-repeat scroll 0 -70px / 44px 95px;
display: inline-block;
height: 9px;
width: 9px;
}
注意:这里引用的是精灵图标集,该sprite图片原始大小是88*190,所有后面的数字是缩放精灵图片为原来一半的意思即44*95,前面的0 -70px是什么意思呢,其实就是在原精灵图片上要定位0 140px的地方,缩放后只要定位到0 -70px即可定位到精灵图标了。后面是图片的整个缩放大小,前面是缩放后的定位点。后面其实就是css3的background-size属性的简写,还可写成百分比形式,即一个50%即可
最后注意:还有一个坑就是less中遇到+,-,*,/符合它会计算,如上面代码中的70px/40px,它会计算出1.59使得background属性值无效(ff会报这个错)
所以遇到上面的代码写在less中的话要做到避免编译,写法是:~'.....';
background: ~'rgba(0, 0, 0, 0) url("../images/website_icon@2x.png") no-repeat scroll 0 -70px / 44px 95px';
只有这样写,上面带/的代码才不会被编译成计算式。
比如一个实际宽高36*28的图标,要缩小一半引用进来的写法就是:
background:rgba(0, 0, 0, 0) url("../images/report_icon@2x.png") no-repeat scroll left center / 18px 14px;
//left center是图标定位,/后面的18px 14px是指定背景图标应用的大小,原图标大小是36px 28px 这样指定大小为18*14的写法就可以起到类似img中的等比缩放效果
注意:单个图片可以用left center来左上角定位
2、另一种写法:
.tag-icon {
background: rgba(0, 0, 0, 0) url("../images/website_icon@2x.png") no-repeat scroll 0 -70px / 44px 95px;
display: inline-block;
height: 9px;
width: 9px;
}
注意:这里引用的是精灵图标集,该sprite图片原始大小是88*190,所有后面的数字是缩放精灵图片为原来一半的意思即44*95,前面的0 -70px是什么意思呢,其实就是在原精灵图片上要定位0 140px的地方,缩放后只要定位到0 -70px即可定位到精灵图标了。后面是图片的整个缩放大小,前面是缩放后的定位点。后面其实就是css3的background-size属性的简写,还可写成百分比形式,即一个50%即可
最后注意:还有一个坑就是less中遇到+,-,*,/符合它会计算,如上面代码中的70px/40px,它会计算出1.59使得background属性值无效(ff会报这个错)
所以遇到上面的代码写在less中的话要做到避免编译,写法是:~'.....';
background: ~'rgba(0, 0, 0, 0) url("../images/website_icon@2x.png") no-repeat scroll 0 -70px / 44px 95px';
只有这样写,上面带/的代码才不会被编译成计算式。
相关文章推荐
- iOS开发-单元测试
- 《疯狂Java讲义(第3版)》.(李刚)——类和对象
- Qt 基本绘图技术
- 设计模式 ----命令模式 之 管理智能家电
- 如何以个人名义发送营销电子邮件?
- Python 核心编程笔记_Chapter_3 Note_3 内存管理_垃圾回收
- Snowflake算法核心
- 网络请求一个蛮好的库
- collectionView代理事件 相关处理 iOS 新手笔记
- 一塔湖图(codevs 1024)
- Android M (API23) 中对权限的授权处理
- Git\Github\msysgit\tortoisegit
- XML解析之PULL解析
- 极路由+花生壳端口映射搭建管家婆教程
- LeetCode 129. sum-root-to-leaf-numbers
- Ubuntu下安装Atom编辑器并画PlantUML图
- 【Spring应用级学习】AOP
- 基于JBox2D物理引擎开发的“雷电”小游戏(五)——碰撞
- java-RandomAccessFile
- C++面向对象多线程编程简介