在 CSS 中,利用 background-image 属性我们可以指定元素的背景图片,例如:

.example {
background-image: url(image/some.png);
background-repeat: repeat;
}

其中,PNG 是常见的背景图片格式;较新的浏览器,比如 Chrome 8+,Firefox 4+,IE 9+,Opera 9.5+ 和 Safari 5+,也支持使用 SVG 格式的背景图片。当背景图片大小超过元素的大小时,我们可以用 background-repeat 属性指明重复覆盖的方式。

通常,一个网站中会使用许多个小图片。为减少网络请求的数目,我们经常将多个小图片拼合为一个大图片,然后用 CSS Sprite 的方法,截取其中的某个图片。假设我们将 5 个宽为 24px 的小图片,从左到右合并为一个宽为 120px 的大图片。此时,我们可以用下面的方法,分别截取出第 2 个和第 3 个小图片作为背景:

.image2 {
background-image: url(some.png);
background-repeat: no-repeat;
background-position: -24px 0px;
}
.image3 {
background-image: url(some.png);
background-repeat: no-repeat;
background-position: -48px 0px;
}

其中,background-position 属性指明了背景图片的左上角位置相对于元素区域的左上角的偏移值。

这个 background-position 属性也可以使用比例值,此时表示背景图片的该比例位置和元素区域的该比例位置重合。因此,取值为 0% 0% 表示背景图片的左上角和元素区域的左上角重合,而取值为 50% 50% 表示背景图片的中心和元素区域的中心重合。上面的例子也可以改为比例值如下:

.image2 {
background-image: url(some.png);
background-repeat: no-repeat;
background-position: 25% 0%;
}
.image3 {
background-image: url(some.png);
background-repeat: no-repeat;
background-position: 50% 0%;
}

经过简单计算可知,如果一行有 n 个等宽的图片,则截取第 k 个时要用的比例值为 (k-1)/(n-1)。不过使用比例值有时也不太可靠,例如在 Opera 12.15 中测试时发现,使用长度值时截取正常,而使用比例值时截取有些错位。

有时候,我们也会需要从大图片中先缩小到一定大小,再截取部分图片。这时候可以用 CSS3 的 background-size 属性。例如,我们用 SVG 图形作为背景图片,其中该 SVG 图形中包含 5 排 3 列共 15 个 96x96 像素的小图形,总共大小为 480x288 像素。而我们需要截取第 2 个和第 3 个并缩放到 24x24 像素大小作为背景图片。此时的 CSS 代码如下:

.image2 {
width: 24px; height: 24px;
background-image: url(some.svg);
background-repeat: no-repeat;
background-size: 120px 72px;
background-position: -24px 0px;
}
.image3 {
width: 24px; height: 24px;
background-image: url(some.svg);
background-repeat: no-repeat;
background-size: 500% 300%;
background-position: -48px 0px;
}

其中,我们先用 background-size 属性将 some.svg 缩小到 120x72 像素,再用 background-position 属性截取小图片。这个 background-size 属性既可以用长度值也可以用比例值,用比例值时将根据元素的大小计算背景图片的缩放大小。Chrome 3+,Firefox 4+,IE 9+,Opera 10+ 和 Safari 4.1+ 都支持这个属性。

参考资料:
[1] MDN - background-image - CSS
[2] MDN - background-repeat - CSS
[3] MDN - background-position - CSS
[4] MDN - background-size - CSS
[5] W3C - CSS2 - Colors and Backgrounds
[6] W3C - CSS Backgrounds and Borders Module Level 3
[7] CSS: Using Percentages in Background-Image - SitePoint
[8] svg-icon-loader - load SVG images from one single file
[9] SVG CSS Injection—A Different Approach Towards SVG Rendering

CSS 背景图片的定位和缩放的更多相关文章

  1. css背景图片定位练习(一)

    首先准备一张雪碧图,Like this 背景图片的定位方法有3种,比较常用的两种为 关键字:background-position: top left; (top/bottom/cennter/lef ...

  2. CSS背景图片定位

    原文:CSS背景图片定位 在网页开发中我们经常需要对图片进行分割(如下图)来使用,而不是分别提供单独的图片来调用,常见的如页面背景,按钮图标等,这样做的好处就是减少请求次数,节省时间和带宽. 对背景图 ...

  3. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  4. css背景图片拉伸 以及100% 满屏显示

    如何用css背景图片拉伸 以及100% 满屏显示呢?这个问题听起来似乎很简单.但是很遗憾的告诉大家.不是我们想的那么简单. 比如一个容器(body,div,span)中设定一个背景.这个背景的长宽值在 ...

  5. div css背景图片不显示

    我们在写页面时,为了便于维护,css样式通常都是通过link外部导入html的,有时在css中写入背景图片时,此时背景图片的路径应该是相对css文件的.比如,此时的文件有index.html,css. ...

  6. 【IE6的疯狂之八】链接伪类(:hover)CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  7. 【转】链接伪类(:hover)CSS背景图片有闪动BUG

    来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...

  8. 兼容各浏览器的css背景图片拉伸代码

    需要用到背景图拉伸,找到了下面这段css代码: filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='***.jpg' , s ...

  9. css背景图片拉伸

    css背景图片拉伸 background-image:url(bg.png); -moz-background-size: 100% 100%; -o-background-size: 100% 10 ...

随机推荐

  1. CodeForces Round #296 Div.2

    A. Playing with Paper 如果a是b的整数倍,那么将得到a/b个正方形,否则的话还会另外得到一个(b, a%b)的长方形. 时间复杂度和欧几里得算法一样. #include < ...

  2. ASP.NET MVC Html.ActionLink使用说明

    本文整理了该方法的几种重载形式: 1.Html.ActionLink("linkText","actionName")该重载的第一个参数是该链接要显示的文字,第 ...

  3. Facebook存储技术方案:找出“暖性BLOB”数据

    Facebook公司已经在其近线存储体系当中彻底弃用RAID与复制机制,转而采用分布式擦除编码以隔离其所谓的“暖性BLOB”. 暖性?BLOB?这都是些什么东西?大家别急,马上为您讲解: BLOB—— ...

  4. [HUD 1195] Open the Lock

    Open the Lock Problem Description Now an emergent task for you is to open a password lock. The passw ...

  5. this class is not key value coding-compliant for the key ##

    setValue:forUndefinedKey:]: this class is not key value coding-compliant for the key ## 出现以上错误时很恶心,并 ...

  6. C语言中strcpy(char *strDest, const char *strScr)字符串复制库函数的理解与分析

    1.原版的strcpy()函数原型 char * strcpy( char *strDest, const char *strSrc ) { assert( (strDest != NULL) &am ...

  7. python - 沙盒环境 - virtualenv - 简明使用录

    1. 不讲安装,没意思 2. 使用 virtualenv ENV # 建立环境,ENV你可以随便定,看起来像是 mkdir ENV cd ENV # 进目录呗 source bin/activate ...

  8. 【转】pdf 中如何把几页缩小成一页打印

    我用的是Foxit PDF Reader,可以这样设置:文件-打印-打印处理下的页面排列选择“在每张纸上放置多页”-选择每页版数即可. 如果你用的是Adobe Reader,也可以自己找一下,看是否有 ...

  9. Solr DIH以Mysql为数据源批量创建索引

    演示使用solr管理后台,以mysql为数据源,批量建索引的方法 测试于:Solr 4.5.1, mmseg4j 1.9.1, Jdk 1.6.0_45, Tomcat 6.0.37 | CentOS ...

  10. HDU5777 domino (BestCoder Round #85 B) 思路题+排序

    分析:最终的结果肯定会分成若干个区间独立,这些若干个区间肯定是独立的(而且肯定是一边倒,左右都一样) 这样想的话,就是如何把这n-1个值分成 k份,使得和最小,那么就是简单的排序,去掉前k大的(注意l ...