08 盒背景、背景图片、精灵图、阿里字体图标

主要内容：

① 盒背景的设置：渐变色、填图。
② 盒背景填图的操作：图居中、边缘发光、图满铺等。
③ 精灵图：坐标定位显示 - 管中窥豹，只见花纹。
④ 阿里字体图标。

1、盒背景设置

<style>
      .box {
        width: 300px;
        height: 300px;
        /* border: 1px solid #000; */
        border-radius: 150px;
        background-color: lightgreen;
        /* 因为内边距是透明的，只能设置宽度不能设置样式，因此，背景色默认可以从内边距透出来 */
        /* padding: 20px; */
        /* 控制背景的覆盖范围限制在内容区，裁切 */
        background-clip: border-box;
        background-clip: content-box;
        /* 渐变 */
        background: linear-gradient(red, yellow);
        background: linear-gradient(45deg, red, yellow);
        background: linear-gradient(to right, red, yellow);
        background: linear-gradient(
          to left,
          rgba(255, 0, 0, 0.5), /*最后一个为透明度*/
          white,
          yellow,
          white,
          yellow
        );                      /*多个颜色的时候相互就会间隔开，形成颜色波*/
        /* background-clip: content-box; */
    </style>

2、背景图操作

    <style>
        /* background-image: url("girl.jpg"); */
        background-repeat: no-repeat;   /*否则会填满*/
        /* background-repeat: repeat-y; 在横向或纵向上repeat*/
        /* background-attachment: fixed; */
        /* 背景定位: 位置 */
        /* background-position: 50px 60px; */
        /* background-position: right center; */
        /* background-position: center right; */
        /* 只写一个，第二个默认就是center */
        /* background-position: left; */
        /* background-position: 50% 20%; */
        /* 只写一个，第二个默认就是50% 这种情况下就是居中显示*/
        /* background-position: 50% 50%; */
        background-size: contain; /*单张的整体显示*/
        background-size: cover;   /*整图展开*/
        /* 简写 */
        background: violet;
        background: url("girl.jpg") no-repeat center;
        position: relative;
        top: 20px;
        left: 30px;
        /* box-shadow: 5px 8px 10px #888; */
      }
      .box:hover {
        /* 外发光。左阴影大小，右阴影大小，阴影模糊化。最后的是颜色*/
        box-shadow: 0 0 8px #888;
        cursor: pointer;
      }
    </style>

3、精灵图：坐标定位显示 - 管中窥豹，只见花纹

精灵图类似一张有很多相同大小的icon、头像等的大图。
然后通过建立一个跟每个icon大小一样的box的方式，来通过坐标（其实就是图片位置）挪动图片，让我们想看到的图片刚好在box中。

    <style>
      .box1 { /*这个是用来显示大图的*/
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        background-image: url("1.png");
        background-repeat: no-repeat;
        background-position: 50px 20px;
      }
      .box2 { /*这个用来显示大图中的每个小图。最后的-220px等就是位置移动*/
        width: 110px;
        height: 110px;
        background-image: url("1.png");
        background-repeat: no-repeat;
        background-position: -220px -110px;
      }
      .box3 {
        width: 110px;
        height: 110px;
        background-image: url("1.png");
        background-repeat: no-repeat;
        background-position: -220px -220px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>

4、阿里字体图标

牛的企业都在探索创新。开始可能是为了自己内部用。到一定程度了就公开，让社会去用。
字体图标外贸是图标，但其实可以看作是字体。因为具有字体的各种属性。例如大小、颜色，按照编码进行加载等。

阿里字体的加载和使用

登陆网站 https://www.iconfont.cn/
注册后选中对应的字体图标加入一个项目中。
下载解压放到开发项目目录下。
在<head></head>中建立关联code（eg <link rel="stylesheet" href="myicon/iconfont.css" />），直接引用下载文件中的iconfont.css文件。
在<body></body>中调取对应的图标名称的方式就可以使用了（注意选择font class形式，而非unicode模型，其他形式可以再去摸索）。
iconfont不用改，中间的即为图标名称，最后可以简写一个新class名，这样后面就可以比较方便地style了。
```
<div>
   <span class = "iconfont icon-san umrl"></span>
</div>
<form action="">
 <label for="psw">
   <input type="password" name="password" /><span class="iconfont open-eye"
     ></span
   >
 </label>
</form>
```
下面这个图形中的小太阳就是阿里字体图标产生出来的。当然是选择了多个span后。
- 发现一个问题：貌似在css文件中定义font-size的时候不发生作用。但在html文件中直接定义style的时候font-size是发挥作用的。

主要内容：

1、盒背景设置

2、背景图操作

3、精灵图：坐标定位显示 - 管中窥豹，只见花纹

4、阿里字体图标

阿里字体的加载和使用

相关文章