简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > 背景控制和精灵图的原理与实现以及阿里图标的引用
Blogger Information
Blog 16
fans 2
comment 0
visits 20026
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
背景控制和精灵图的原理与实现以及阿里图标的引用
肖傲的博客
Original
766 people have browsed it

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轴，从背景大图片左上角为起始点定位所需图片的位置。
如下所示：

  1. < !DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       .box1 {
  9.         width: 500px;
  10.         height: 400px;
  11.         border: 1px solid #000;
  12.         background-image: url("11.png");
  13.         background-repeat: no-repeat;
  14.         background-position: 50px 20px;
  15.       }
  16.       .box2 {
  17.         /* 取灰色房子图标 宽和高需要设置为图标大小*/
  18.         width: 110px;
  19.         height: 110px;
  20.         background-image: url("11.png");
  21.         background-repeat: no-repeat;
  22.         /* 设置x轴110px y轴为0 */
  23.         background-position: -110px 0px;
  24.       }
  25.       .box3 {
  26.         /* 取橘黄色地球图标 宽和高需要设置为图标大小*/
  27.         width: 110px;
  28.         height: 110px;
  29.         background-image: url("11.png");
  30.         background-repeat: no-repeat;
  31.         /* 设置x轴-220px y轴为-110 */
  32.         background-position: -220px -110px;
  33.       }
  34.     </style>
  35.   </head>
  36.   <body>
  37.     <div class="box1"></div>
  38.     <div class="box2"></div>
  39.     <div class="box3"></div>
  40.   </body>
  41. </html>

3.阿里图标的引用流程

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

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

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

示例如下：

  1. < !DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- 引用图标css文件 -->
  7.     <link rel="stylesheet" href="./iconfont.css" />
  8.     <title>阿里图标font-class 引用</title>
  9.   </head>
  10.   <style>
  11.     .cookie span {
  12.         /* 设置大小 */
  13.       font-size: 40px;
  14.       color: darkgoldenrod;
  15.     }
  16.     .strawberry span {
  17.         /* 设置大小 */
  18.       font-size: 40px;
  19.       color: lightpink;
  20.     }
  21.   </style>
  22.   <body>
  23.     <div class="cookie">
  24.         <!-- 引用icon-food-cookie图标 -->
  25.       <span class="iconfont icon-food-cookie"></span>
  26.     </div>
  27.     <div class="strawberry">
  28.         <!-- 引用icon-food-strawberry -->
  29.       <span class="iconfont icon-food-strawberry"></span>
  30.     </div>
  31.   </body>
  32. </html>

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

Correcting teacher：查无此人查无此人

Correction status：qualified

Teacher's comments：完成的不错，继续加油
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！