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

博主信息

博文 30

粉丝 0

访问量 37821

专题推荐

更多>

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

背景控制的常用属性

CSS 可以设置纯色背景也可以设置背景图片

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

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>背景控制的常用属性</title>
    <style>
      .box {
        width: 300px;
        height: 300px;
        padding: 30px;
        border: 2px solid #000;
        background-color: lightgreen;
        background-image: url(girl.jpg);
        background-repeat: no-repeat;
        background-position: center;
        /* background-size: contain; */
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

显示效果

精灵图的原理与实现

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

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>精灵图的原理与实现</title>
    <style>
      .box1 {
        width: 400px;
        height: 300px;
        border: 1px solid #000;
        background-image: url(pic.png);
        background-repeat: no-repeat;
        background-position: center;
      }
      .box2 {
        margin-top: 10px;
        width: 95px;
        height: 95px;
        border: 1px solid red;
        background-image: url(pic.png);
        background-position: -96px, -96px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</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 进入样式表

@font-face {
font-family: "iconfont";
src: url("iconfont.eot");
src: url("iconfont.eot?#iefix") format("embedded-opentype"), url("iconfont.woff2")
    format("woff2"), url("iconfont.woff") format("woff"), url("iconfont.ttf")
    format("truetype"), url("iconfont.svg#iconfont") format("svg");
}

粘贴字体图标的 iconfont 通用样式进入样式表

.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

找到相应图标的代码在页面上显示<span class="iconfont">3</span>

`font-class`引用

示例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阿里字体图标`font-class`引用</title>
    <link rel="stylesheet" href="font/iconfont.css" />
    <style>
      .zhengyan {
        font-size: 36px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="iconfont icon-zhengyan zhengyan"></span>
    </div>
  </body>
</html>

显示效果

`Unicode` 引用

示例代码

font-icon.css代码

@font-face {
  font-family: "iconfont";
  src: url("font/iconfont.eot");
  src: url("font/iconfont.eot?#iefix") format("embedded-opentype"), url("font/iconfont.woff2")
      format("woff2"), url("font/iconfont.woff") format("woff"), url("font/iconfont.ttf")
      format("truetype"), url("font/iconfont.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阿里字体图标`Unicode`引用</title>
    <link rel="stylesheet" href="font-icon.css" />
    <style>
      .zhengyan {
        font-size: 36px;
        color: red;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="iconfont zhengyan">&#xe607;</span>
    </div>
  </body>
</html>

显示效果

批改老师：

查无此人

批改状态：合格

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

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

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

0条评论

作者最新博文

VSCode与phpstudy的安装与配置

2020-06-10 23:52:55

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

背景控制的常用属性

示例代码

显示效果

精灵图的原理与实现

示例代码

显示效果

阿里字体图标的引用

font-class引用

示例代码

显示效果

Unicode 引用

示例代码

显示效果

`font-class`引用

`Unicode` 引用