背景控制和精灵图的原理与实现以及阿里图标的引用 - 前端

首页 > 博客列表 > 背景控制和精灵图的原理与实现以及阿里图标的引用

博主信息

博文 16

粉丝 2

访问量 25563

专题推荐

更多>

1.背景的属性

1.1背景属性用于定义HTML元素的背景，通常用以下常用属性来控制背景效果

background-color:设置颜色
background-repea:设置是否平铺
取值：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺———默认
background-position：设置背景图像的起始位置
位置的取值可以为像素，也可以使用关键字：top left bottom right center
background-size:设置背景图片宽度和高度
background-attachment:设置背景是否受到滚动条影响
（1）scroll会受滚动条的影响，当内容滚动到下方，图片会消失——默认
（2）fixed不会受滚动条影响，一直保持在视线范围内

为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
例如：background: pink url() no-repeat center;

当使用简写属性时，属性值的顺序为：:

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

2.精灵图的原理和实现

精灵图原理：网页每加载一个图片都需要对服务器进行一次请求，当网页存在很多图片的时候，对服务器的负荷比较大，可以将很多小图放在一张大图上，当需要使用小图的地方对大图进行背景定位，这样只需要加载一个大图片，对服务器只需要请求一次，可以减少服务器的开销，提升用户体验。
示例如下：

通过使用谷歌浏览器插件：Page Ruler Redux 测量精灵图

或者其他测量工具测量图标大小位置，然后定位所需图片位置

如图所示：

经测量发现单个图片的宽为110px 高为110px.以宽为x轴，高为y轴，从背景大图片左上角为起始点定位所需图片的位置。
如下所示：

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box1 {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        background-image: url("11.png");
        background-repeat: no-repeat;
        background-position: 50px 20px;
      }
      .box2 {
        /* 取灰色房子图标 宽和高需要设置为图标大小*/
        width: 110px;
        height: 110px;
        background-image: url("11.png");
        background-repeat: no-repeat;
        /* 设置x轴110px y轴为0 */
        background-position: -110px 0px;
      }
      .box3 {
        /* 取橘黄色地球图标 宽和高需要设置为图标大小*/
        width: 110px;
        height: 110px;
        background-image: url("11.png");
        background-repeat: no-repeat;
        /* 设置x轴-220px y轴为-110 */
        background-position: -220px -110px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>

3.阿里图标的引用流程

1.登录阿里图标的官网：https://www.iconfont.cn/ 注册并登录。
2.根据需要添加至自己项目库，然后下载至本地。

3.按照下载文件里面的引用规则进行引用

这里介绍一下font-class 引用方法
将下载文件中的iconfont.css文件放置到网页项目中
然后再网页中添加引用代码：
<link rel="stylesheet" href="./iconfont.css" />

示例如下：

< !DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引用图标css文件 -->
    <link rel="stylesheet" href="./iconfont.css" />
    <title>阿里图标font-class 引用</title>
  </head>
  <style>
    .cookie span {
        /* 设置大小 */
      font-size: 40px;
      color: darkgoldenrod;
    }
    .strawberry span {
        /* 设置大小 */
      font-size: 40px;
      color: lightpink;
    }
  </style>
  <body>
    <div class="cookie">
        <!-- 引用icon-food-cookie图标 -->
      <span class="iconfont icon-food-cookie"></span>
    </div>
    <div class="strawberry">
        <!-- 引用icon-food-strawberry -->
      <span class="iconfont icon-food-strawberry"></span>
    </div>
  </body>
</html>

总结：精灵图不能随意改变大小和颜色，改变大小会失真模糊。可以使用字体图标进行代替。字体图标的大小要设置给正确的父级，否则没有效果。

批改老师：

查无此人

批改状态：合格

老师批语：完成的不错，继续加油

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

visualstudio的安装和markdown常用语法及小皮面板设置

2020-06-11 17:59:29