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

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简写法相关推荐

YDOOK : CSS div 设置背景图片大小自动缩放
YDOOK : CSS div 设置背景图片大小自动缩放设置示例: 选择器{width:100%;height:100%;background-repeat:no-repeat:background ...
css sprite与background-size结合实现背景图片等比缩放
实际开发中,因为要兼容不同分辨率设备我们的sprite图片可能需要不同的尺寸,比如下面图片我们要用"活动车辆"这个标签,分别需要原图大小和缩小一半之后的图片如果是单独的图片很好处 ...
CSS渐变颜色和浏览器前缀、opacity透明度以及设置多个背景图片写法
目录前言一.多个背景图片二.渐变颜色 1.线性渐变 2.径向渐变 3.浏览器前缀 4.opacity透明度写在最后前言在前面说了CSS怎样设置背景图片,与设置颜色的几种方式.如果你想查看可 ...
IDEA插件系列（8）：Background Image Plus设置背景图片
0. 目录 1. 插件介绍 2. 安装方式 3. 使用方法 3.1 设置背景图片 3.2 清除背景图片设置 3.3 设置随机图片 1. 插件介绍将编辑器背景设置为文件夹中的随机图片. 2. 安装方式 ...
java 背景图片自适应_java 背景图片随窗口大小变化进行自动缩放及平铺 | 学步园...
最近一直被这个问题困扰这,上网也搜了不少这方面的知识,发现很多人都说用reapint方法(很简单的)进行图片重绘就OK了(没源码),于是乎至今也没实现但通过自己的摸索也确实学到了不少东东滴! 在看代 ...
css之文本溢出处理 | 背景图片处理
文本溢出处理单行文本用缩略符号--text-overflow:ellipsis; 多行文本做截断策略--line-height * 行数 = height;text-overflow:hidden; ...
html中的高和宽背景色怎么写,css background-size与背景图片填满div
background-size与背景图片填满div 在开发中,常有需要将一张图片作为一个div的背景图片充满div的需求 background-size的取值及解释 background-size共有 ...
wordpress 背景_如何在WordPress中添加全屏背景图片
wordpress 背景 Full screen background image seems to be a new design trend that is becoming fashionabl ...
html5 css背景图片满,css background-size与背景图片填满div
back和第,.年过事工宗据指数遍互业经搞断果会ground-size与背景图片抖要支圈者器说是事天开的.年后编定功口小发还应久剑填满div 在开发中,常分博累发口小定逻间框加题览果些屏洁动理应有需要 ...

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

背景图片等比缩放的写法background-size简写法相关推荐

最新文章

热门文章