背景图片等比缩放的写法background-size简写法

Posted 2020-07-31 杨杨0708

1、背景图片或图标也可像img一样给其宽高就能指定其缩放大小了。

比如一个实际宽高36*28的图标，要缩小一半引用进来的写法就是：

background:rgba(0, 0, 0, 0) url("../images/[email protected]") 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/[email protected]") 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/[email protected]") no-repeat scroll 0 -70px / 44px 95px‘;

只有这样写，上面带/的代码才不会被编译成计算式。