关键词：CSS；背景图像定位；background；background-position
网页制作中需要用到大量的图标，如果每个图标都是独立的文件，那么网站的图标文件夹内就会存放几十张甚至几百张图片，导致文件夹体积增大；网页渲染时，就会多次到服务器端请求加载这些图标；这样就会导致网页的加载速度变慢，同时也将造成网络资源的浪费。如何将这些图标有效地整合到一张或几张图像中，既能压缩图标文件夹的体积，又能减少图片的加载次数。通过一次加载，就能获得多个图标，然后通过背景图像定位技术，将图标应用到网页中。
CSS背景图像定位技术主要是通过background属性实现的，background是复合属性，包含了background-color、background-image、background-repeat、background-size、background-position等, 背景图像定位技术实现的关键是如何设置background-position的属性值。
1 background-position的属性值
background-position属性设置背景图像的起始位置，它接受三种值：关键字、百分比和长度值。各属性值的意义如下表所示。
.png)
2 background-position定位原理
Windows屏幕坐标系以左上角为坐标原点，X从左往右递增，Y从上到下递增。
2.1 关键字定位
关键字定位是通过关键字top、right、bottom、left和center对背景图像进行定位，比如background-position:center center;，背景图像位于所在元素中心位置，如图1所示。
.png)
2.2 百分比定位
通过百分比对背景图像进行定位，当百分比的值为0%、50%、100%时是和关键字对等的。比如background-position:50% 50%;与background-position: center center;是等效的。当百分比的值和关键字不对等时，水平百分比的值等于容器宽度百分比值减去背景图像宽度百分比值，垂直百分比的值等于容器高度百分比值减去背景图像高度百分比值。比如background-position: 60% 50%; 与 background-position:120px 50px; （X： (300-100) *60% = 120px Y： (200-100) *50% = 50px）是等效的，该坐标即为背景图像控制点（背景图像左上角）的坐标，如图2所示。
2.3 长度值定位
长度值定位与百分比定位相似，都是以背景图像左上角为控制点，对背景图像进行定位。
3 CSS背景图像定位技术的应用
在网页制作中会用到大量的图标，先将这些图标有规律地放置在一张或几张图像中。然后通过背景图像定位技术，分别将图标应用到网页中。
首先，必须指定background-image属性，再根据要独立显示的图标大小确定显示该图标的容器大小。background-position属性的默认值为：0 0。需要使用图标时,设置background-position属性值和显示图标的容器大小即可实现精确控制背景图像在容器中的显示。原理如图3所示,效果如图4所示。
.png)
图3 图4
结构层：
<div class="box1"><i class="icon"></i></div>
<div class="box2"><i class="icon"></i></div>
表现层：
.icon{ background:url(img/icon.png) no-repeat; display:block;
width:80px; height:80px; }
.box2 .icon{ background-position:-80px -80px; }
其中，上述案例采用了背景样式的综合设置，没有单独指定background-image属性。元素<i></i>是行内元素，需要转换为块元素（display:block;）后设置宽高属性才有效。因为案例中图标的大小及显示图标的容器大小均为80px×80px，所以.box2中不再重复设置.icon的大小。
参考文献：
[1]杨松.网页设计案列教程[M].北京：航空工业出版社，2015.
[2]李晓斌.HTML5+CSS3+jQuery Mobile移动网站与App开发实战[M].北京：人民邮电出版社，2018.
论文作者:詹承林
论文发表刊物:《科学与技术》2019年第16期
论文发表时间:2020/1/2
标签：图像论文; 背景论文; 图标论文; 属性论文; 百分比论文; 加载论文; 所示论文; 《科学与技术》2019年第16期论文;