Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 背景控制的常用属性 精灵图原理及用法 阿里字体图标的完整引用流程
Blogger Information
Blog 11
fans 0
comment 0
visits 12893
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
1076 people have browsed it

一.背景控制的常用属性

属性 说明 写法示例
background-color 添加背景颜色 background-color:red;
background-clip 背景裁切 background-clip: content-box;
background: linear-gradient(); 背景渐变 background: linear-gradient(45deg, red, yellow);
background-image 添加背景图片 url(“图片路径”) background-image: url("girl.jpg");
background-repeat 设置是否及如何重复背景图像 background-repeat: no-repeat;
background-attachment 置背景图像是否固定或者随着页面的其余部分滚动 background-attachment: fixed;
background-position 背景定位 background-position: center right;
background-size 规定背景图像的尺寸 background-size: contain;

注：以上有些属性有多个可设置的属性值，请查阅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>背景</title>
  7.     <style>
  8.       .box {
  9.         width: 300px;
  10.         height: 300px;
  11.         /* border: 1px solid #000; */
  12.         border-radius: 15px;
  14.         /* 1.背景色 */
  15.         background-color: lightgreen;
  16.         /* 因为内边距是透明的，只能设置宽度不能设置样式，因此，背景色默认可以从内边距透出来 */
  17.         /* padding: 20px; */
  18.         /* 2.控制背景的覆盖范围限制在内容区，裁切 */
  19.         background-clip: border-box;
  20.         /* background-clip: content-box; */
  21.         /* 3.渐变 deg为渐变角度 颜色顺序就是渐变顺序*/
  22.         /* background: linear-gradient(red, yellow);
  23.         background: linear-gradient(45deg, red, yellow);
  24.         background: linear-gradient(to right, red, yellow);
  25.         background: linear-gradient(
  26.           to left,
  27.           rgba(255, 0, 0, 0.5),
  28.           white,
  29.           yellow,
  30.           white,
  31.           yellow
  32.         ); */
  33.         /* 4.背景裁切 */
  34.         /* background-clip: content-box; */
  36.         /* 5.背景图片 url("图片路径")*/
  37.         /* background-image: url("girl.jpg"); */
  38.         /* background-repeat: no-repeat; */
  39.         /* background-repeat: repeat-y; */
  40.         /* background-attachment: fixed; */
  41.         /* 6.背景定位: 位置 */
  42.         /* background-position: 50px 60px; */
  43.         /* background-position: right center; */
  44.         /* background-position: center right; */
  45.         /* 只写一个，第二个默认就是center */
  46.         /* background-position: left; */
  47.         /* background-position: 50% 20%; */
  48.         /* 只写一个，第二个默认就是50% */
  49.         /* background-position: 50% 50%; */
  50.         /* 7.规定背景图像的尺寸 */
  51.         background-size: contain;
  52.         background-size: cover;
  54.         /* 简写 */
  55.         background: violet;
  56.         background: url("mao.jpg") no-repeat center;
  58.         position: relative;
  59.         top: 20px;
  60.         left: 30px;
  62.         /* box-shadow: 5px 8px 10px #888; */
  63.       }
  65.       .box:hover {
  66.         /* 外发光 */
  67.         box-shadow: 0 0 8px #888;
  68.         cursor: pointer;
  69.       }
  70.     </style>
  71.   </head>
  72.   <body>
  73.     <div class="box"></div>
  74.   </body>
  75. </html>

添加背景图片加一些盒子样式效果图：

二.精灵图的原理与用法

1.原理：精灵图就是把网页中一些背景图片整合到一张图片文件中，利用对背景图片的一些操作属性组合进行背景定位。

优点就是减少网页对服务器发起的http请求，快了网页访问速度，提升用户体验。

2.用法：
（1）首先我们得到一张我们需要用的精灵图 例

（2）我们想要确定每个小图标在这个精灵图文件中的大小，我们就得量小图标的尺寸，这里我们推荐一款谷歌浏览器标尺插件 Page Ruler Redux 下载后把crx文件拖拽到 管理拓展程序下即可安装 这样我们可以量到每个小图标的宽高

（3）然后我们利用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>背景实战: 精灵图/雪碧图</title>
  7.     <style>
  8.       .box1 {
  9.         width: 500px;
  10.         height: 400px;
  11.         border: 1px solid #000;
  12.         /* 添加背景图片 */
  13.         background-image: url("1.png");
  14.         /* 设置背景图片不重复 */
  15.         background-repeat: no-repeat;
  16.         /* 设置背景定位 */
  17.         background-position: 50px 20px;
  18.       }
  19.       .box2 {
  20.         /* 小图标 */
  21.         width: 110px;
  22.         height: 110px;
  23.         /* 添加背景精灵图 */
  24.         background-image: url("1.png");
  25.         /* 不重复 */
  26.         background-repeat: no-repeat;
  27.         /* 利用定位属性定位到精灵图上的任意小图标 */
  28.         background-position: -220px -110px;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="box1"></div>
  34.     <div class="box2"></div>
  35.   </body>
  36. </html>

效果图：

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

阿里云字体图标是非常好用的，我们在平时的开发中可以用一些阿里云免费的字体图标，下面我们就说一下怎么使用阿里云字体图标

1.打开阿里云矢量图标库官网 https://www.iconfont.cn

2.使用官网指定的登录方式进行登录

3.登录后我们可以再搜索框搜索我们想要的图标，然后点购物车图标添加入库

4.然后点击购物车 加入项目 没有项目我们可以手动创建项目



5.添加完项目后，会自动跳转到“我的项目”界面（也可以通过顶部菜单【图标管理】-【我的项目进入】）

6.在我的项目里 可以对单个图标进行下载，也可以下载整个图标项目
阿里云字体图标在项目中有三种引用方式 我们推荐使用第一种引用方式，因为第一种引用方式的兼容性很好

7.具体在项目中怎么引用，使用帮助里有很详细的教程

注：示例中的代码复制后，请把路径更改为正确的路径，否则会找不到文件

小结：

1.熟练运用背景的一些常用属性
2.建议看一下css的手册，具体看下不同背景属性对应的属性值作用和写法
3.会对精灵图定位，取到精灵图的任意图标
4.会使用阿里云矢量图标库的图标，会对我们开发提供很大的方便

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