search

博客列表 >简单演示控制的常用属性，精灵图和阿里图标

简单演示控制的常用属性，精灵图和阿里图标

我说孟
我说孟原创
2020年06月30日 00:31:01690浏览

一：背景控制

背景控制属性：

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

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

相关文章

查看更多