Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 背景定位技术和阿里图标使用技巧
Blogger Information
Blog 14
fans 0
comment 2
visits 12662
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
背景定位技术和阿里图标使用技巧
JKY辉哥
Original
742 people have browsed it

1.背景控制的常用属性

序号 描述 属性/值
1 背景颜色 background-color:red/yellow/#ccc
2 背景剪切 background-clip:border-box/content-box;
3 背景颜色渐变 background: linear-gradient(coral, yellow);
4 背景图片 background-image:url("图片名.jpg")
5 背景平铺方式 background-repeat:no-repeat/repeat-x/repeat-y
6 背景定位 background-position: 50% 20%/left
7 图片等比例剪切 background-size:contain/cover

示例代码：

  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: 300px;
  10.         height: 300px;
  11.         /* border: 1px solid #ccc; */
  12.         border-radius: 150px;
  14.         /* 背景色 */
  15.         background-color: burlywood;
  17.         /* 因为内边距是透明的，只能设置宽度不能设置样式，因此，背景色默认可以从内边距透出来 */
  18.         /* padding: 20px; */
  20.         /* 控制背景的覆盖范围限制在内容区，裁切 */
  21.         /* 背景色扩展到边框 */
  22.         /* background-clip: border-box; */
  24.         /* 背景色只扩展到内容 */
  25.         /* background-clip: content-box; */
  27.         /* 渐变 */
  28.         /* 从coral渐变到yellow */
  29.         /* background: linear-gradient(coral, yellow); */
  30.         /* 45度角渐变 */
  31.         /* background: linear-gradient(45deg, coral, yellow); */
  32.         /* 从左到右 */
  33.         /* background: linear-gradient(to right, coral, yellow); */
  34.         /* 从右到左 */
  35.         /* background: linear-gradient(to left, coral, yellow); */
  36.         /* 从右到左多色渐变 */
  37.         /* background: linear-gradient(to left, coral, yellow, white, yellow); */
  39.         background: linear-gradient(
  40.           to left,
  41.           rgba(255, 0, 0, 0.5) white,
  42.           yellow,
  43.           white,
  44.           yellow
  45.         );
  47.         /* 背景图片 */
  48.         background-image: url("girl.jpg");
  49.         background-repeat: no-repeat;
  50.         /* background-repeat: repeat-y; */
  51.         /* background-attachment: fixed; */
  52.         /* 背景定位：位置 */
  53.         background-position: 50px 60px;
  54.         /* background-position: center right; */
  55.         /* background-position: right center; */
  56.         /* 只写一个，第二个默认就是center */
  57.         background-position: left;
  59.         /* background-position: 50% 20%; */
  60.         /* 只写一个，第二个默认就是50% */
  61.         /* background-position: 50% 50%; */
  63.         /* 图片等比例剪切 */
  64.         /* background-size: contain; */
  65.         background-size: cover;
  67.         /* 简写 */
  68.         /* background: violet; */
  69.         background: url("girl.jpg") no-repeat center;
  71.         position: relative;
  72.         top: 20px;
  73.         left: 10px;
  75.         /* box-shadow: 5px 8px 10px #888; */
  76.       }
  77.       .box:hover {
  78.         /* 外发光效果 */
  79.         box-shadow: 0 0 8px #888;
  80.         cursor: pointer;
  81.       }
  82.     </style>
  83.   </head>
  84.   <body>
  85.     <div class="box"></div>
  86.   </body>
  87. </html>

运行截图
背景;

2.精灵图的原理与实现

  • 精灵图功能：使用精灵图目标主要是为了减少 HTTP 请求，提升页面图片加载效率
  • 精灵图原理：使用 background-position 属性，设置背景图片，标尺量坐标 0,0，显示不同图片

  • 案例代码如下

  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>
  8.     <style>
  9.       .box1 {
  10.         width: 500px;
  11.         height: 400px;
  12.         border: 1px solid #000;
  13.         background-image: url("1.png");
  14.         background-repeat: no-repeat;
  15.         /* background-position: 0px 0px; */
  16.       }
  18.       .box2 {
  19.         width: 110px;
  20.         height: 110px;
  21.         background-image: url("1.png");
  22.         background-repeat: no-repeat;
  23.         background-position: -220px -110px;
  24.       }
  26.       .box3 {
  27.         width: 110px;
  28.         height: 110px;
  29.         background-image: url("1.png");
  30.         background-repeat: no-repeat;
  31.         background-position: -330px -220px;
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div class="box1"></div>
  37.     <div class="box2"></div>
  38.     <div class="box3"></div>
  39.   </body>
  40. </html>

精灵图案例运行截图
精灵图;

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

  • 登录阿里图标库官网，注册账号，创新寻找项目所需图标，下载定义下载图标
  • 具体引用代码如下：

引用图标方式 1：

  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.     <link rel="stylesheet" href="font/iconfont.css" />
  7.     <title>阿里字体图标的使用方法1</title>
  8.     <style>
  9.       .dz {
  10.         font-size: 63px;
  11.         color: red;
  12.         /* box-shadow: 4px 4px 3px #888; */
  13.       }
  14.       .fd {
  15.         font-weight: 500;
  16.         font-size: 60px;
  17.         color: red;
  18.       }
  19.     </style>
  20.   </head>
  21.   <body>
  22.     <div>
  23.       <span class="iconfont dz"></span>
  24.       <span class="iconfont fd"></span>
  25.       <span class="iconfont fd"></span>
  26.     </div>
  27.   </body>
  28. </html>

运行截图
方式1
注意：需要引入iconfont.css样式文件，具体使用可以查看下载的图标库示例demo_index.html 模板

引用图标方式 2：
demo4.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.     <link rel="stylesheet" href="font-ico.css" />
  7.     <title>阿里字体图标的使用方法2</title>
  8.     <style>
  9.       .lb {
  10.         color: brown;
  11.         font-size: 36px;
  12.       }
  13.     </style>
  14.   </head>
  15.   <body>
  16.     <span class="iconfont lb"></span>
  17.   </body>
  18. </html>

font-ico.css 文件代码：

  1. @font-face {
  2.   font-family: "iconfont";
  3.   src: url("font/iconfont.eot");
  4.   src: url("font/iconfont.eot?#iefix") format("font/embedded-opentype"),
  5.     url("font/iconfont.woff2") format("font/woff2"),
  6.     url("font/iconfont.woff") format("woff"),
  7.     url("font/iconfont.ttf") format("font/truetype"),
  8.     url("font/iconfont.svg#iconfont") format("font/svg");
  9. }
  11. .iconfont {
  12.   font-family: "iconfont" !important;
  13.   font-size: 16px;
  14.   font-style: normal;
  15.   -webkit-font-smoothing: antialiased;
  16.   -moz-osx-font-smoothing: grayscale;
  17. }

注意:引用字体路径 font,自行添加

运行截图
方式2;

4.知识总结

    • 背景：背景颜色、背景图片、背景定位、背景裁切、背景颜色渐变、背景图片定位

    • 字体图标：字体图标，一定程度上代替了精灵图的功能，而且功能更加强大（图标在网站上无处不在）

    • 背景图片定位显示图标是字体图标的前身,学会使用精灵图和字体图标将让工作事半功倍

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