Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 背景控制的常用属性、精灵图原理、阿里字体图标使用
Blogger Information
Blog 8
fans 0
comment 0
visits 5438
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
646 people have browsed it

背景控制的常用属性

背景控制的常用属性有

  • 控制背景颜色：background-color
  • 控制背景的覆盖范围：background-clip
  • 渐变：background:linear-gradient(red, yellow);
  • 背景图片：background-image:url(“”)
  • 控制背景图片是否平铺重复：background-repeat
  • 背景定位：background-position
  • 背景尺寸：background-size
    需要注意背景色和背景图片是互斥的。
  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: 200px;
  10.         height: 200px;
  11.         border: 1px solid #000;
  12.         padding:10px;
  13.         margin:10px;
  14.         }
  15.         .box1{
  16.             float:left;
  17.             /* 设置背景色 */
  18.             background-color:blue;
  19.             /* 控制背景的覆盖范围在内容区，背景裁切 */
  20.             background-clip: content-box;
  21.         }
  22.         .box2{
  23.             float:left;
  24.             /* 渐变添加  background: linear-gradient(角度,颜色, 颜色); 前后两个颜色值默认从上到下渐变，可设置角度、从左到右等方向,可添加多个颜色*/
  25.             background: linear-gradient(30deg, red, yellow);
  26.             /* background: linear-gradient(to right, red, yellow); 可用regba(255,0,0,0.5)*/
  27.         }
  28.         .box3{
  29.             float:left;
  30.             /* 背景图片，默认图片重复 */
  31.             background-image:url("flower.png");
  32.         }
  33.         .box4{
  34.             float:left;
  35.               /* 背景图片，取消图片重复 */
  36.               background-image:url("flower.png");
  37.               background-repeat: no-repeat;
  38.               /* 向某个方向重复，x水平方向，y垂直方向等 */
  39.               background-repeat: repeat-x;
  40.         }
  41.         .box5{
  42.             float:left;
  43.             background-image:url("flower.png");
  44.             /* 背景图片，取消图片重复 */
  45.             background-repeat: no-repeat;
  46.             /* 背景定位，可用数值、也可用关键字，使用关键字时不分先后顺序，如果只写一个，其它默认center*/
  47.             background-position:50px 50px ;
  48.             /* 下面三个属性效果一致 */
  49.             background-position:right center ;
  50.             background-position:center right ;
  51.             background-position:right;
  52.             /* 百分比形式，只写一个，默认第二个为50% */
  53.             background-position:50% 20%;
  54.         }
  55.         .box6{
  56.             float:left;
  57.             background-image:url("flower.png");
  58.             /* 背景大小 等比缩放*/
  59.             background-size:contain;
  60.             /* 根据盒子拉伸 */
  61.             background-size:cover;
  62.         }
  63.         .box7{
  64.             float:left;
  65.             /* 简写 */
  66.             background:url("flower.png") no-repeat right;
  67.         }
  68.         .box8{
  69.             float:left;
  70.             background:url("flower.png") no-repeat center;
  71.             /* 设置盒子阴影 */
  72.             box-shadow: 5px 5px 6px red;
  73.         }
  74.         .box9{
  75.             float:left;
  76.             /* 设置圆角，值为50%时为圆形 */
  77.             border-radius:30px;
  78.             background:url("flower.png") no-repeat center;
  79.             /* 设置盒子阴影 */
  80.             box-shadow: 5px 5px 6px red;
  81.         }
  82.         /* 鼠标悬停 */
  83.         .box9:hover{
  84.             /* 设置圆角，值为50%时为圆形 */
  85.             border-radius:50%;
  86.             box-shadow: 0px 0px 10px red;
  87.             cursor: pointer;
  88.         }
  89.     </style>
  90. </head>
  91. <body>
  92.     <div class="box box1"></div>
  93.     <div class="box box2"></div>
  94.     <div class="box box3"></div>
  95.     <div class="box box4"></div>
  96.     <div class="box box5"></div>
  97.     <div class="box box6"></div>
  98.     <div class="box box7"></div>
  99.     <div class="box box8"></div>
  100.     <div class="box box9"></div>
  101. </body>
  102. </html>

代码运行结果：

精灵图的原理与实现

精灵图是字体图标的前身，可以减少网站加载图片的次数，从而减少资源的占用。精灵图是许多小图片集合在一张大图片上，实现的原理主要是依靠css背景定位的知识,用css代码将图片上的每个小图片切出来从而取到每个图标。通过编程的方式来拿到每个图标，减少http的请求次数。具体原理主要是根据所选图标的大小写一个相应大小的盒子，盒子的初始位置不变，通过图片的定位使图片移动，将所需图标显示在盒子中，达到了裁剪的效果。
举例演示精灵图的实现原理

  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.         *{
  9.             margin: 0;
  10.             padding:0;
  11.             box-sizing: border-box;
  12.         }
  13.         .box{
  14.             width:440px;
  15.             height:328px;
  16.             background-color:aliceblue;
  17.             background:url("1.png");
  18.             background-repeat:no-repeat;
  19.             border:1px solid red;
  20.         }
  21.         .box1{
  22.             width: 110px;
  23.             height:110px;
  24.             background:url("1.png");
  25.         }
  26.         .box2{
  27.              /* 盒子大小等同于你测量好的每个图标的大小*/
  28.             width: 110px;
  29.             height:110px;
  30.             /* 利用css背景定位属性裁切需要图标 */
  31.             background:url("1.png");
  32.             background-repeat:no-repeat;
  33.             background-position:-110px 0 ;
  34.         }
  35.         .box3{
  36.             /* 盒子大小等同于你测量好的每个图标的大小*/
  37.             width: 110px;
  38.             height:110px;
  39.             /* 利用css背景定位属性裁切需要图标 */
  40.             background:url("1.png");
  41.             background-repeat:no-repeat;
  42.             background-position:-220px 0 ;
  43.         }
  44.         .box4{
  45.              /* 盒子大小等同于你测量好的每个图标的大小*/
  46.             width: 110px;
  47.             height:110px;
  48.             /* 利用css背景定位属性裁切需要图标 */
  49.             background:url("1.png");
  50.             background-repeat:no-repeat;
  51.             background-position:-330px 0 ;
  52.         }
  53.         .box5{
  54.              /* 盒子大小等同于你测量好的每个图标的大小*/
  55.             width: 110px;
  56.             height:110px;
  57.             /* 利用css背景定位属性裁切需要图标 */
  58.             background:url("1.png");
  59.             background-repeat:no-repeat;
  60.             background-position:0 -110px ;
  61.         }
  62.         .box6{
  63.              /* 盒子大小等同于你测量好的每个图标的大小*/
  64.             width: 110px;
  65.             height:110px;
  66.             /* 利用css背景定位属性裁切需要图标 */
  67.             background:url("1.png");
  68.             background-repeat:no-repeat;
  69.             background-position:-110px -110px ;
  70.         }
  71.         .box7{
  72.              /* 盒子大小等同于你测量好的每个图标的大小*/
  73.             width: 110px;
  74.             height:110px;
  75.             /* 利用css背景定位属性裁切需要图标 */
  76.             background:url("1.png");
  77.             background-repeat:no-repeat;
  78.             background-position:-220px -110px ;
  79.         }
  80.         .box8{
  81.              /* 盒子大小等同于你测量好的每个图标的大小*/
  82.             width: 110px;
  83.             height:110px;
  84.             /* 利用css背景定位属性裁切需要图标 */
  85.             background:url("1.png");
  86.             background-repeat:no-repeat;
  87.             background-position:-330px -110px ;
  88.         }
  89.         .box9{
  90.              /* 盒子大小等同于你测量好的每个图标的大小*/
  91.             width: 110px;
  92.             height:110px;
  93.             /* 利用css背景定位属性裁切需要图标 */
  94.             background:url("1.png");
  95.             background-repeat:no-repeat;
  96.             background-position:0 -220px ;
  97.         }
  98.         .box10{
  99.              /* 盒子大小等同于你测量好的每个图标的大小*/
  100.             width: 110px;
  101.             height:110px;
  102.             /* 利用css背景定位属性裁切需要图标 */
  103.             background:url("1.png");
  104.             background-repeat:no-repeat;
  105.             background-position:-110px -220px ;
  106.         }
  107.         .box11{
  108.              /* 盒子大小等同于你测量好的每个图标的大小*/
  109.             width: 110px;
  110.             height:110px;
  111.             /* 利用css背景定位属性裁切需要图标 */
  112.             background:url("1.png");
  113.             background-repeat:no-repeat;
  114.             background-position:-220px -220px ;
  115.         }
  116.         .box12{
  117.              /* 盒子大小等同于你测量好的每个图标的大小*/
  118.             width: 110px;
  119.             height:110px;
  120.             /* 利用css背景定位属性裁切需要图标 */
  121.             background:url("1.png");
  122.             background-repeat:no-repeat;
  123.             background-position:-330px -220px ;
  124.         }
  125.         /* 浮动使每个图标横向排列 */
  126.         .continer>div{
  127.             float:left; 
  128.             margin:5px;        
  129.         }
  130.         /* 为每个图标添加鼠标悬停效果 */
  131.         .continer>div:hover{
  132.             cursor: pointer;
  133.             border:2px;
  134.             border-radius: 50%;
  135.             box-shadow: 0 0 10px red;
  136.         }
  137.     </style>
  138. </head>
  139. <body>
  140.     <div class="box">精灵图</div>
  141.         <div class="continer">
  142.             <div class="box1"></div>
  143.             <div class="box2"></div>
  144.             <div class="box3"></div>
  145.             <div class="box4"></div>
  146.             <div class="box5"></div>
  147.             <div class="box6"></div>
  148.             <div class="box7"></div>
  149.             <div class="box8"></div>
  150.             <div class="box9"></div>
  151.             <div class="box10"></div>
  152.             <div class="box11"></div>
  153.             <div class="box12"></div>
  154.         </div>
  155. </body>
  156. </html>

阿里字体图标的完整引用流程

1、https://www.iconfont.cn/ 登录阿里图标官网，用Github账号或新浪微博注册登录。

2、找到喜欢的要用的图标，点击购物车按钮放入自己的购物车。然后加入自己的项目（没有项目网站会提示你创建自己的项目，根据网站提示就好）。


3、在图标管理中查看各种应用方式，Unicode（字符编码）、Font class（类样式）、Symnol（样式表）三种方式，点击下载素材，并解压至你的网站运行目录。这里举例Unicode方式。这种方式的兼容性很好。

4、安装到网站运行环境后，开始引入图标。

  • 在下载的文件夹中有个demo_index.html文件，详细说明了引入过程。

  • 首先在你的网站目录下创建一个css文件（这里我创建名为font.css的文件），并放入如下代码（项目下生成字体族，说明文件中的第一步）更改文件代码中的引用目录。
    同时放入定义使用 iconfont 的样式代码（说明文件中的第二步。不加入会导致图标不显示）。这样做可以使多个文件复用样式，提高代码的复用率，简化代码书写。
    @font-face {

    1.   font-family: 'iconfont';
    2.   src: url('font/iconfont.eot');
    3.   src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
    4.       url('font/iconfont.woff2') format('woff2'),
    5.       url('font/iconfont.woff') format('woff'),
    6.       url('font/iconfont.ttf') format('truetype'),
    7.       url('font/iconfont.svg#iconfont') format('svg');
    8. }
    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. }

  • 页面引入刚创建的css文件，- 浏览器检查器检查字体文件是否引入成功。

  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.css" />
  8.     <style>
  9.     </style>
  10. </head>
  11. <body>
  12. </body>
  13. </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.css" />
  8.     <style>
  9.         /* 通过自定义样式的方式来进行设置 */
  10.         .icon{
  11.             font-size:3rem;
  12.             color:red;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <!-- 引入第二步图标的定义样式，否则图标不会显示，标签中间添加样式代码 ，每个图标一个代码，可以从官网中你的项目中收藏的样式进行查看 -->
  18.     <span class="iconfont icon"></span>
  19.     <span class="iconfont icon"></span>
  20.     <span class="iconfont icon"></span>
  21. </body>
  22. </html>



阿里图标将图标变成纯编码的方式，非常省资源。

Correcting teacher：GuanhuiGuanhui

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