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';
只有这样写,上面带/的代码才不会被编译成计算式。
 

背景图片等比缩放的写法background-size简写法的更多相关文章

  1. CSS让DIV按照背景图片的比例缩放,并让背景图片填充整个元素(转)

    目的是:通过background的一系列属性,让DIV按照背景图片的比例缩放,并让背景图片填充整个DIV 首先我们需要让背景图片在指定的DIV中全部填充显示 之前看有用类似 background-at ...

  2. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  3. css样式背景图片设置缩放

    一.背景颜色图片平铺 background-color 背景颜色 background-image 背景图片地址 background-repeat 是否平铺 默认是平铺 background-pos ...

  4. background-size 设置背景图片的大小

    background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. 语法: background-size: auto | <长度值 ...

  5. background-size (设置背景图片的大小)

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  6. css background-size与背景图片填满div

    background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...

  7. css06背景图片

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. 首页背景图片在PC端有显示,在手机端不显示的解决方法

    今天看博客的资源大小,发现背景图片有44k大的吓人,准备压缩一下. 压缩之后才发现,我的背景图片在手机端是没有显示的.原因是背景图片不支持缩放. 上网查了下,发现加入如下代码之后就支持缩放了: bac ...

  9. vs code 的背景颜色主题还有背景图片的自定义方法

    先说颜色主题吧: 依次点击文件--->首选项---->颜色主题 你就可以看到不同的颜色主题了 如果你还觉得不好看,不满意,不符合你的审美风格 你还可以在插件库里面下载相关插件: THEME ...

随机推荐

  1. AVR之BOOTLOADER技术详解(转)

    源:http://blog.csdn.net/zhenhua10/article/details/6442412 ATmega128具备引导加载支持的用户程序自编程功能(In-System Progr ...

  2. js 中ajax请求时设置 http请求头中的x-requestd-with= ajax

    今天发现 AngularJS 框架的$http服务提供的$http.get() /$http.post()的ajax请求中没有带 x-requested-with字段. 这样的话,后端的php 就无法 ...

  3. Hadoop: failed on connection exception: java.net.ConnectException: Connection refuse

    ssh那些都已经搞了,跑一个书上的例子出现了Connection Refused异常,如下: 12/04/09 01:00:54 INFO ipc.Client: Retrying connect t ...

  4. hihoCoder 1252 Kejin Game

    2015 ACM / ICPC 北京站 D题 网络最大流 和同学讨论了一会儿,还是Xiang578机智... ... /* ************************************** ...

  5. bat 常用命令

    基础部分:======================================================================一.基础语法: 1.批处理文件是一个". ...

  6. localStorage、sessionStorages 使用

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  7. 分享我们项目中基于EF事务机制的架构 【转载】

    http://www.cnblogs.com/leotsai/p/how-to-use-entity-framework-transaction-scope.html 写在前面: 1. 本文中单元测试 ...

  8. 定时且周期性的任务研究I--Timer

    很多时候我们希望任务可以定时的周期性的执行,在最初的JAVA工具类库中,通过Timer可以实现定时的周期性的需求,但是有一定的缺陷,例如:Timer是基于绝对时间的而非支持相对时间,因此Timer对系 ...

  9. SqlServer拆分列

    SELECT TOP 1000 substring([a],0,CHARINDEX('/',a)) as low,substring([a],CHARINDEX('/',a)+1,len([a])-C ...

  10. JAVA语法题

    import java.util.*; public class Birthdays { public static void main(String[] args){ Map<Friends, ...