Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 背景控制的常用属性、精灵图的原理与实现、阿里字体图标的两种引用流程
Blogger Information
Blog 30
fans 0
comment 2
visits 29342
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
778 people have browsed it

背景控制的常用属性、精灵图的原理与实现、阿里字体图标的两种引用流程

背景控制的常用属性

  • CSS 可以设置纯色背景也可以设置背景图片
语法 描述
background-color 设置背景颜色
background-image 设置背景图片
background-repeat 设置背景平铺方向
background-position 设置背景图像的位置
background-size 拉伸背景图片
background-clip 设置背景覆盖范围
background: linear-gradient() 设置背景色渐变
box-shadow 设置背景阴影外发光效果

示例代码

  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>背景控制的常用属性</title>
  7.     <style>
  8.       .box {
  9.         width: 300px;
  10.         height: 300px;
  11.         padding: 30px;
  12.         border: 2px solid #000;
  14.         background-color: lightgreen;
  15.         background-image: url(girl.jpg);
  16.         background-repeat: no-repeat;
  17.         background-position: center;
  18.         /* background-size: contain; */
  19.         background-clip: content-box;
  20.       }
  21.     </style>
  22.   </head>
  23.   <body>
  24.     <div class="box"></div>
  25.   </body>
  26. </html>

显示效果

精灵图的原理与实现

  • 精灵图是将多张图片合成到一张图片里
  • 打开网页的时候只用加载这一张图片
  • 利用 CSS 实现多张图片的显示
  • 主要是利用 CSS 背景图片的background-position属性

示例代码

  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>精灵图的原理与实现</title>
  7.     <style>
  8.       .box1 {
  9.         width: 400px;
  10.         height: 300px;
  11.         border: 1px solid #000;
  12.         background-image: url(pic.png);
  13.         background-repeat: no-repeat;
  14.         background-position: center;
  15.       }
  16.       .box2 {
  17.         margin-top: 10px;
  18.         width: 95px;
  19.         height: 95px;
  20.         border: 1px solid red;
  22.         background-image: url(pic.png);
  23.         background-position: -96px, -96px;
  24.       }
  25.     </style>
  26.   </head>
  27.   <body>
  28.     <div class="box1"></div>
  29.     <div class="box2"></div>
  30.   </body>
  31. </html>

显示效果

阿里字体图标的引用

  • 进入阿里图标网站www.iconfont.cn
  • 使用Github或者微博账号注册登录
  • 搜索相应图标 添加入库 在库中选择添加进项目选择项目或者新建项目
  • 在图标管理下我的项目中可以看见自己项目下的图标
  • 选择下载至本地 解压至设计文件根目录
  • 打开解压的文件夹 打开demo_index.html 可以看到使用说明
  • 第一种字体图标使用方式：font-class引用-主要进行以下两步骤
    • 获取字体图标的 CSS 样式表<link rel="stylesheet" href="./iconfont.css">
    • 在页面上显示图标<span class="iconfont icon-xxx"></span>
  • 第二种字体图标使用方式：Unicode 引用（兼容性更好）-主要进行以下四步骤
    • 新建字体图标层叠样式表font-icon.css
    • 粘贴字体图标的 font-face 进入样式表
      1. @font-face {
      2. font-family: "iconfont";
      3. src: url("iconfont.eot");
      4. src: url("iconfont.eot?#iefix") format("embedded-opentype"), url("iconfont.woff2")
      5.     format("woff2"), url("iconfont.woff") format("woff"), url("iconfont.ttf")
      6.     format("truetype"), url("iconfont.svg#iconfont") format("svg");
      7. }
    • 粘贴字体图标的 iconfont 通用样式进入样式表
      1. .iconfont {
      2. font-family: "iconfont" !important;
      3. font-size: 16px;
      4. font-style: normal;
      5. -webkit-font-smoothing: antialiased;
      6. -moz-osx-font-smoothing: grayscale;
      7. }
    • 找到相应图标的代码 在页面上显示<span class="iconfont">&#x33;</span>

font-class引用

示例代码

  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>阿里字体图标`font-class`引用</title>
  7.     <link rel="stylesheet" href="font/iconfont.css" />
  8.     <style>
  9.       .zhengyan {
  10.         font-size: 36px;
  11.         color: red;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <div>
  17.       <span class="iconfont icon-zhengyan zhengyan"></span>
  18.     </div>
  19.   </body>
  20. </html>

显示效果

Unicode 引用

示例代码

  • font-icon.css代码
  1. @font-face {
  2.   font-family: "iconfont";
  3.   src: url("font/iconfont.eot");
  4.   src: url("font/iconfont.eot?#iefix") format("embedded-opentype"), url("font/iconfont.woff2")
  5.       format("woff2"), url("font/iconfont.woff") format("woff"), url("font/iconfont.ttf")
  6.       format("truetype"), url("font/iconfont.svg#iconfont") format("svg");
  7. }
  9. .iconfont {
  10.   font-family: "iconfont" !important;
  11.   font-size: 16px;
  12.   font-style: normal;
  13.   -webkit-font-smoothing: antialiased;
  14.   -moz-osx-font-smoothing: grayscale;
  15. }
  • HTML代码
  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>阿里字体图标`Unicode`引用</title>
  7.     <link rel="stylesheet" href="font-icon.css" />
  8.     <style>
  9.       .zhengyan {
  10.         font-size: 36px;
  11.         color: red;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <div>
  17.       <span class="iconfont zhengyan">&#xe607;</span>
  18.     </div>
  19.   </body>
  20. </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