html背景图片与字体图标 - 12期

微信公众号讲师中心

首页

文章

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

专题

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

AI工具

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

学习

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

编程手册

大前端 JavaScript 后端开发数据库移动端运维开发 UI设计计算机基础 XML Web Services

下载

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

在html页面中块元素背景可以丰富多彩：

比如改变背景颜色：

给块元素添加 background-color: color; 自己喜欢的颜色；

如此属性还有：

background-image 图片背景；
background-repeat 背景图片不重复；
background: linear-gradient() 渐变颜色；
background-attachment 固定背景图像
background-position 背景位置方向

…

完整代码示例：

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小刚的日志：背景</title>
  </head>
  <style>
    div:nth-child(1) {
      width: 400px;
      height: 400px;
      padding: 10px;
      border: 2px solid lightseagreen;
      background-color: goldenrod;
      /* 背景裁切 */
      /* 内容区域 */
      background-clip: content-box;
      /* 边框区域 */
      background-clip: border-box;
      /* 背景渐变 */
      /* 默认上下方向 */
      background: linear-gradient(blue, white);
      /* 45度 */
      background: linear-gradient(45deg, blue, white);
      /* 左到右 */
      background: linear-gradient(to right, blue, white);
      /* 多种颜色及透明度 */
      background: linear-gradient(
        to left,
        green,
        blue,
        white,
        /* 0.5是透明度 */ rgba(215, 74, 248, 0.5)
      );
      /* 背景图片 */
      background-image: url("baby.jpg");
      /* 背景图片不重复 */
      background-repeat: no-repeat;
      /* 横向重复 */
      /* background-repeat: repeat-x; */
      /* 纵向重复 */
      /* background-repeat: repeat-y; */
      /* 背景不随滚动条滚动 */
      /* background-attachment: fixed; */
      /* 背景定位 有两个属性值*/
      /* 只写一个另外一个就是默认居中 */
      background-position: right;
      /* 百分比只写一个另一个就和第一个一样 */
      background-position: 20% 30%;
      background-position: 50%;
      /* 背景图片大小 */
      /* 宽高，可以用百分比 */
      background-size: 50px 50px;
      /* 高或宽铺满，另一个等比 */
      background-size: contain;
      /* 铺满背景 */
      background-size: cover;
      /* 简写 */
      background: black;
      background: url("baby.jpg") no-repeat center;
    }
    /* 背景颜色与图片冲突，只能选其一 */
    div:last-of-type {
      width: 300px;
      height: 300px;
      border: 2px solid black;
      /* 边框添加阴影 */
      box-shadow: 3px 3px 2px lightgrey;
      /* 边框圆角 */
      border-radius: 50%;
      /* 添加背景图片 */
      background: url("baby.jpg") no-repeat 50%;
    }
  </style>
  <body>
    <div></div>
    <div></div>
  </body>
</html>

在html页面中放置多个图片会消耗过多的请求资源

那么传统的方式是使用“精灵图”/“雪碧图”将图片集合起来。

先从网络上下载一套图标集合放到一张图片上：

通过测量：每个图标的宽高约55px，上下左右间隔约7px。

获取图片中的握手图标位置：

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小刚日志：精灵图/雪碧图</title>
  </head>
  <style>
    .box1 {
      width: 400px;
      height: 400px;
      border: 2px solid lightslategrey;
      background: url("icon.png");
    }
    .box1 + div {
      width: 63px;
      height: 63px;
      background: url("icon.png") no-repeat;
      background-position: -217px -217px;
    }
  </style>
  <body>
    <div class="box1"></div>
    <div></div>
  </body>
</html>

运行效果：

还可以通过javascript脚本将图标循环出来使用。

更加合适的图标使用方法：字体图标！

在阿里图标库中选择合适的图标使用：

登陆阿里图标网站，只能用github和新浪微博账号；
搜索自己想要的图标，并收藏到自己的账号项目下；
加入项目；
下载项目；
将下载的压缩包解压缩到项目目录中就可以使用了；

代码样例：3种不同使用方式

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小刚日志：字体图标unicode方式</title>
  </head>
  <style>
    @font-face {
      font-family: "iconfont";
      src: url("unicode/iconfont.eot");
      src: url("unicode/iconfont.eot?#iefix") format("embedded-opentype"),
        url("unicode/iconfont.woff") format("woff"),
        url("unicode/iconfont.ttf") format("truetype"),
        url("unicode/iconfont.svg#iconfont") format("svg");
    }
    /* 设置样式 */
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: 0.2px;
      -moz-osx-font-smoothing: grayscale;
    }
    .test {
      font-size: 66px;
    }
  </style>
  <body>
    <i class="iconfont test">&#xe656;</i>
  </body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小刚日志：字体图标fontclass方式</title>
    <!-- 引入图标 -->
    <link rel="stylesheet" href="fontclass/iconfont.css" />
  </head>
  <style>
    /* 设置样式 */
    .iconfont {
      font-family: "iconfont" !important;
      font-size: 16px;
      font-style: normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: 0.2px;
      -moz-osx-font-smoothing: grayscale;
    }
    .test {
      font-size: 66px;
    }
  </style>
  <body>
    <i class="iconfont icon-icon-test test"></i>
  </body>
</html>

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>小刚日志：字体图标symbol方式</title>
  </head>
  <style type="text/css">
    /* 设置样式 */
    .icon {
      width: 3em;
      height: 3em;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }
    .test {
      width: 13em;
      height: 13em;
    }
  </style>
  <body>
    <svg class="icon test" aria-hidden="true">
      <use xlink:href="#icon-icon-test1"></use>
    </svg>
  </body>
  <!-- 引入图标 -->
  <script type="text/javascript" src="symbol/iconfont.js"></script>
</html>