search

博客列表 >背景控制的常用属性、精灵图原理、阿里字体图标使用

背景控制的常用属性、精灵图原理、阿里字体图标使用

不加糖的浓咖啡
不加糖的浓咖啡原创
2020年07月05日 17:41:17641浏览

背景控制的常用属性

背景控制的常用属性有

  • 控制背景颜色：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>



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

上一条：合肥工业大学自考本科学位申请条件下一条：用PHP搭建个人博客之前你要知道的是应该写什么内容
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多