背景控制和精灵图的实例演示以及阿里图标的引用流程

背景控制的常用属性

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

background-color:设置颜色
background-clip:控制背景的覆盖范围限制在内容区/裁切
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:linear-gradient:设置渐变色
还可设置渐变角度、例：45deg

还可采用简写模式（将这些属性合并到这一个属性内），
例：background: pink url() no-repeat center（居中）;

浏览器示例：

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

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

精灵图的原理与实现

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

通过使用谷歌浏览器插件：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;
        /* 只写一个关键词第二个默认就是center */
        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>

浏览器显示效果：

阿里图标的应用方法

1.首先进入阿里图标官网（点击即可进入），注册并登录即可（仅支持微博或github账号）
2.根据自己的需要将图标加入购物车
3.将购物车中的图标都添加到项目中，然后在项目中下载图标
4.下载完成后解压并打开文件
5.根据下载文件的应用规则进行引用

这里着重介绍一下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>

浏览器显示效果：

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

内容小结

精灵图灵活处理了浏览器显示加载慢
阿里图标更加丰富了我们制作网页的元素

背景控制的常用属性

精灵图的原理与实现

阿里图标的应用方法

内容小结

相关文章