Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 简单演示控制的常用属性，精灵图和阿里图标
Blogger Information
Blog 7
fans 0
comment 0
visits 5077
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
680 people have browsed it

一：背景控制

背景控制属性：

背景颜色：background-color;
裁切:background-clip: content-box;
渐变:ackground: linear-gradient();
背景图片:background-image: url(‘图片名称’);
规定背景图像是否固定或者随着页面的其余部分滚动:background-attachment: fixed;
背景定位:background-position;
背景尺寸:background-size;
简写:1.background: url(timg.jpg)2.background: violet;
圆角:border-radius

背景控制示例：

  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.         /* 边框改成圆形 ，得关掉padding*/
  13.         /* border-radius: 150px; */
  14.         /* 背景色 */
  15.         background-color: lightgreen;
  16.         padding: 20px;
  17.         /* 控制背景的覆盖范围，限制在内容区，裁切 */
  18.         background-clip: content-box;
  19.         /* 渐变 45度渐变*/
  20.         background: linear-gradient(45deg, coral, yellow);
  21.         /* 从左到右渐变 */
  22.         /* background: linear-gradient(to right, coral, yellow); */
  24.         /* background-clip: content-box; */
  26.         /* 背景图片 */
  27.         background-image: url("lufei.jpg");
  28.         /* 不让图片重复 */
  29.         background-repeat: no-repeat;
  30.         /* background-attachment: fixed; */
  31.         /* 背景定位：位置 ,只写一个，第二个默认是center*/
  32.         background-position: 50%, 50%;
  33.         /* 等比缩放 */
  34.         /* background-size: cover; */
  36.         /* 简写 */
  37.         background: violet;
  38.         background: url("lufei.jpg") no-repeat center;
  40.         position: relative;
  41.         top: 30px;
  42.         left: 30px;
  43.         /* 5是水平方向的偏移，8是垂直方向的偏移，6是扩散的像素 */
  44.         box-shadow: 5px 8px 6px #888;
  45.       }
  46.     </style>
  47.   </head>
  48.   <body>
  49.     <div class="box"></div>
  50.   </body>
  51. </html>

二.精灵图的使用

1.什么叫CSS Sprite

CSS Sprites叫 CSS精灵或者雪碧图，是一种网页图片应用处理方式
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中。
再利用CSS的”background-image”，”background-repeat”，”background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

2.为什么建议使用CSS Sprite

在网页访问中，客户端每需要访问一张图片都会向服务器发送请求，所以，访问的图片数量越多，请求次数也就越多，造成延迟的可能性也就越大。
所以，CSS Sprites技术加速的关键，并不是降低质量，而是减少个数，当然随之而来的增加内存消耗，CSS Sprites图片繁琐的合成等缺点在网站性能的提升前，也就不足为道了。

3.CSS Sprites 的优点：

1.减少图片的字节
2.减少了网页的http请求，从而大大的提高了页面的性能
3.减少命名难的问题

4.CSS Sprites 的缺点：

①.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。
②.在宽屏，高分辨率的屏幕下的自适应页面，图片如果不够宽，很容易出现背景断裂。
CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

5.background-position 属性设置背景图像的起始位置。

这个属性设置背景原图像（由 background-image 定义）的位置，背景图像如果要重复，将从这一点开始。
提示：background-position属性设置背景原图像（由 background-image 定义）的位置，意味着使用这个属性的前提是必须设置背景原图像background-image。

代码如下

  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.         background-image: url("tubiao.png");
  13.         background-repeat: no-repeat;
  14.         background-position: 0px 0px;
  15.       }
  16.       .box2 {
  17.         width: 110px;
  18.         height: 110px;
  19.         background-image: url("tubiao.png");
  20.         background-repeat: no-repeat;
  21.         background-position: -220px -110px;
  22.       }
  23.       .box3 {
  24.         width: 110px;
  25.         height: 110px;
  26.         background-image: url("tubiao.png");
  27.         background-repeat: no-repeat;
  28.         background-position: -330px 0;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     <div class="box1"></div>
  34.     <div class="box2"></div>
  35.     <div class="box3"></div>
  36.   </body>
  37. </html>

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

1.进入站点

https://www.iconfont.cn/

2.通过GITHUB账号登入

3.“图标库”或搜索 寻找需要的图标

4.将需要的图标加入购物车

5.将图标通过项目的方式下载到本地站点目录并解压

6.font-class 引用:

使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">
第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
“ iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。
代码如下：

  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.         <!-- 引入字体图标的类样式 -->
  7.         <link rel="stylesheet" href="font/iconfont.css" />
  8.         <title>阿里图标的使用方法</title>
  9.         <style>
  10.           .player {
  11.             font-size: 60px;
  12.             color: bisque;
  13.           }
  14.         </style>
  15.       </head>
  16.       <body>
  17.         <span class="iconfont icon-icon-test2 player"></span>
  18.       </body>
  19.     </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