背景属性控制，精灵图原理以及字体图标的引用 - web前端学习

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 背景属性控制，精灵图原理以及字体图标的引用

博主信息

博文 60

粉丝 5

访问量 81509

专题推荐

更多>

1.背景控制

CSS背景属性用于定义HTML中元素的背景

以下是背景控制中常用属性：

background-color:定义元素的背景颜色，示例如下：

background-image:定义元素的背景图片，示例如下：

background-repeat:定义背景图片的重复方向，常用取值如下：
- no-repeat:不重复
- repeat-x:水平方向重复
- repeat-y:垂直方向重复

示例如下：

background-position:设置背景图像的起始位置，此属性的取值可以是一些关键字，比如：right、left、top、bottom、center，也可以是长度值，比如：50px或者10cm，还可以使用百分比数值，比如：50%。一般来说，其取值语法是background-position:'水平方向值' '垂直方向值'，但是有时也可以只写一个取值，第二个值有默认值。
- 当使用关键字时，若只有一个值，第二个值默认是center，示例如下：
- 当使用长度值时，若只有一个值，第二个值默认垂直居中，若有两个值，表示分别向X和Y方向偏移多少，示例如下：
- 当使用百分比时，若只有一个值，第二个值默认是50%，示例如下：
background-attachment:设置背景图像是否随着页面的其余部分一起滚动或者固定，常用取值如下：
- scroll：默认值，表示随页面滚动
- fixed：固定不动
示例如下：

background-size:设置背景图片的尺寸，取值可以是关键字，比如：contain、cover,也可以是数值或百分比，其中：contain表示图像会按照自身的纵横比伸缩直到接触到定位区域边缘，cover表示图像按照自身纵横比伸缩到完全覆盖定位区域，示例如下：

background-clip：用于对背景图像进行裁切，取值如下：
- border-box:默认值
- content-box:背景应用于内容框中
- padding-box:背景会覆盖到内边距的外边缘
示例如下：

以上属性中，还可以使用backgorund属性来简写，简写顺序是：

background-color
background-image
background-repeat
background-attachment
background-position

示例如下：

背景属性差不多就这样了，最后附上测试过程中的代码：

 <style>
    .box {
      width: 600px;
      height: 500px;
      /* border: 1px solid black*/
      /* border: 10px dashed black; */
      padding: 20px;
      /* 定义元素的背景颜色 */
      /* background-color: cadetblue; */
      /* 定义元素的背景图片 */
      /* background-image: url("pic.jpg"); */
      /* 定义背景图片的重复方向 */
      /* background-repeat: no-repeat; */
      /* background-repeat: repeat-x; */
      /* background-repeat: repeat-y; */
      /* 定义背景图像的起始位置 */
      /* background-position: left center; */
      /* background-position: left; */
      /* background-position: 100px; */
      /* background-position: 100px 50px; */
      /* background-position: 80%; */
      /* background-position: 80% 50%; */
      /* 设置背景图片的尺寸 */
      /* background-size: 400px 400px; */
      /* background-size: 50% 50%; */
      /* background-size: contain; */
      /* background-size: cover; */
      /* 背景图像的裁切 */
      /* background-clip: border-box; */
      /* background-clip: content-box; */
      /* background-clip: padding-box; */
      /* 属性简写 */
      background: rgb(218, 145, 145) url(pic.jpg) no-repeat center;
    }
    /* 设置背景图片是否滚动或者固定 */
    body {
      /* background-image: url("girl.jpg");
      background-repeat: repeat-x;
      background-attachment: scroll;
      background-attachment: fixed; */
    }
  </style>
  <body>
    <div class="box"></div>
    <!-- <p>背景图片会随之滚动</p>
  <p>为了精简页面，多余的文字就删除了，您在测试过程中，可以多加一些段落</p> -->
    <!-- <p>背景图片会固定不动</p>
  <p>为了精简页面，多余的文字就删除了，您在测试过程中，可以多加一些段落</p> -->
  </body>

2. 精灵图的原理与实现

精灵图（sprite）:又称雪碧图，产生这一技术的主要原因是：网页如果在同一时间要加载很多的小图片，可能会造成服务器拥堵，而精灵图能够缓解这种情况，提升用户体验！
精灵图就是一张带有很多小图标的图片集合，我们会将程序开发所需要的图标都放在这一张图片上，然后，通过设置背景图像的位置，拿到我们所需要的图标

下面看看精灵图是一个什么样子？

在上面背景属性控制的案例中，我们可以知道，一张图片被插入到元素中时，图像的左上角和元素空间的左上角是对齐的。所以，要拿到图像中的图标，就需要用到背景属性中的background-position，然后设置图像的水平垂直方向偏移量，取到所需要的图标。对于偏移量，我们要取到其中的图标，图像始终会朝水平反方向和垂直反方向移动，所以这两个值都会是负值。

在实际开发中，我们首先要知道精灵图中图标的大小，以便后面设置position偏移量，这里就演示Chrome的Page Rule Redux 插件来获取像素值。

第一步：安装igg谷歌访问助手，然后放入扩展程序中，接着打开此助手，去访问谷歌应用商店
第二步：在应用商店中搜索Page Rule Redux插件，然后添加到扩展程序，安装好后如下图：

第三步：将精灵图的域名地址复制到浏览器中，千万不要把图片拖到浏览器，那样没效果的，（例：http://127.0.0.1:5500/front.edu/0619/sprite.jpg），然后打开Page Rule Redux插件，结果如下图：

第四步：直接在图片上拖动鼠标，就可以拿到你所需要的像素值了，你想要取哪个图标，就拖动哪里，得到那个图标的起始位置后，就可以设置position了。

下面，实际操作一下，取图片中的放大镜图标，先写好代码页面，做好取图标前的操作：

然后，在插件中测量图标大小：

然后在代码中把box2的宽度高度设置一下，用来放图标，同时加入背景图：

接着，去取到放大镜图标的起始位置：

偏移量拿到之后，在代码中写入：

这样就成功的拿到自己所需要的图标了！最后附上代码及效果图：

<style>
    .box1 {
      width: 400px;
      height: 300px;
      border: 1px solid black;
      background: url("sprite.jpg") no-repeat;
    }
    /* 在box2中取放大镜图标 */
    .box2 {
      width: 44px;
      height: 44px;
      background: url("sprite.jpg") -17px -98px;
    }
    /* 在box3中取到笑脸图标 */
    .box3 {
      width: 44px;
      height: 44px;
      background: url("sprite.jpg") -195px -189px;
    }
  </style>
  <body>
    <div class="box1"></div>
    <hr />
    <div class="box2"></div>
    <hr />
    <div class="box3"></div>
  </body>

3. 阿里字体图标的引用

进入阿里字体图标官网并登陆：https://www.iconfont.cn/plus/collections/detail?cid=31
获取到自己所需要的图标后下载到本地：

下载好后解压到自己的项目文件夹，打开demo_index.html，里面有字体图标的用法：

这里主要需要下面这两种用法：

Font class：此方法主要是通过class来定义图标，操作步骤如下：
- 第一步：引入项目下面生成的fontclass代码，如：<link rel="stylesheet" href="./iconfont.css">，路径可能需要自己修改一下，示例如下：
- 第二步：挑选相应图标并获取类名，应用于页面：<span class="iconfont icon-xxx"></span>，示例如下：

Unicode：这种方法是兼容性最好的，操作步骤如下：

第一步：拷贝项目下面生成的 @font-face

@font-face {
font-family: 'iconfont';
src: url('iconfont.eot');
src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff2') format('woff2'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

当然，其中的路径还是需要自己修改一下，示例如下：

第二步：定义使用 iconfont 的样式

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

其中：font-size的值可以更改，也可以加上color属性，示例如下：

第三步：挑选相应图标并获取字体编码，应用于页面，如：<span class="iconfont">3</span>，示例如下：

3. 总结：

背景控制的属性大都比较好理解，都是一些字面量的东西，着重要理解到background-size的覆盖范围，background-clip的裁剪范围和background-position的偏移方式。
学会了精灵图的原理，主要就是通过background-position来设置的，主要理解到图像偏移的时候水平垂直方向如何设置，通过ps或者插件的方式找到图标的起始位置
对于阿里字体图标的引用，是必须要学会的，精灵图毕竟淡出了，并且字体图标更方便，它不需要服务器返回图片资源，也不需要设置各种css偏移量或者运用脚本处理，而且字体图标可以简单的设置下颜色，修改尺寸，表现更美观

批改老师：