Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 08 盒背景、背景图片、精灵图、阿里字体图标
Blogger Information
Blog 62
fans 2
comment 1
visits 42289
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
08 盒背景、背景图片、精灵图、阿里字体图标
老黑
Original
862 people have browsed it

主要内容：

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

1、盒背景设置

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

2、背景图操作

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

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

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

  1.     <style>
  2.       .box1 { /*这个是用来显示大图的*/
  3.         width: 500px;
  4.         height: 400px;
  5.         border: 1px solid #000;
  6.         background-image: url("1.png");
  7.         background-repeat: no-repeat;
  8.         background-position: 50px 20px;
  9.       }
  10.       .box2 { /*这个用来显示大图中的每个小图。最后的-220px等就是位置移动*/
  11.         width: 110px;
  12.         height: 110px;
  14.         background-image: url("1.png");
  15.         background-repeat: no-repeat;
  16.         background-position: -220px -110px;
  17.       }
  19.       .box3 {
  20.         width: 110px;
  21.         height: 110px;
  23.         background-image: url("1.png");
  24.         background-repeat: no-repeat;
  25.         background-position: -220px -220px;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <div class="box1"></div>
  31.     <div class="box2"></div>
  32.     <div class="box3"></div>
  33.   </body>

4、阿里字体图标

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

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

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