背景控制和精灵图的实例演示以及阿里图标的引用流程 - 前端提交作业

微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

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

下载

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

搜索

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

首页 > 博客列表 > 背景控制和精灵图的实例演示以及阿里图标的引用流程

博主信息

博文 40

粉丝 0

访问量 50072

专题推荐

更多>

背景控制的常用属性

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>