search

博客列表 >背景控制常用属性和精灵图的原理与实现及阿里图标的完整引用流程

背景控制常用属性和精灵图的原理与实现及阿里图标的完整引用流程

零龙
零龙原创
2020年06月27日 12:21:05753浏览

背景控制常用属性

属性

属性 描述
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

1、background-attachment

值 描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
local 背景图片会随着元素内容的滚动而滚动。
inherit 规定应该从父元素继承 background-attachment 属性的设置。

实例

  1. body 
  2.   { 
  3.   background-image: url("image/logo.png"); 
  4.   background-attachment: fixed;
  5.   }

示例图

2、background-color

属性

值 描述
color 指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent 指定背景颜色应该是透明的。这是默认
inherit 指定背景颜色，应该从父元素继承

实例

  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>background-color实例</title>
  7. </head>
  8. <style>
  9.     body{
  10.         background-color: #green;
  11.     }
  12. </style>
  13. <body>
  15. </body>
  16. </html>

示例图

3、 background-position

属性

值 描述
left right top bottom 如果仅指定一个关键字，其他值将会是”center”
x% y% 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％
xpos ypos 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit 指定background-position属性设置应该从父元素继承

实例

  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>background-position</title>
  7. </head>
  8. <style>
  9.     body{
  10.         background-image: url("image/logo.png");
  11.         background-repeat: no-repeat;
  12.         background-position: top center;
  13.     }
  14. </style>
  15. <body>
  17. </body>
  18. </html>

示例图

4、 background-image

属性

值 描述
url(‘URL’) 图像的URL
none 无图像背景会显示。这是默认
linear-gradient() 创建一个线性渐变的 “图像”(从上到下)
radial-gradient() 用径向渐变创建 “图像”。 (center to edges)
repeating-linear-gradient() 创建重复的线性渐变 “图像”。
repeating-radial-gradient() 创建重复的径向渐变 “图像”
inherit 指定背景图像应该从父元素继承

实例

  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>background-image</title>
  7. </head>
  8. <style>
  9.     body{
  10.        background-image: repeating-linear-gradient(red, yellow 10%, green 10%);
  11.     }
  12. </style>
  13. <body>
  15. </body>
  16. </html>

示例图

4、 background-repeat

值 描述
repeat 背景图像将向垂直和水平方向重复。这是默认
repeat-x 只有水平位置会重复背景图像
repeat-y 只有垂直位置会重复背景图像
no-repeat background-image不会重复
inherit 指定background-repea属性设置应该从父元素继承

实例

  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>background-repeat</title>
  7. </head>
  8. <body>
  9.     <style>
  10.         body{
  11.             background-image: url("image/logo.png");
  12.             background-repeat: repeat-y;
  13.         }
  14.     </style>
  15. </body>
  16. </html>

示例图

" class="reference-link">

综合实例

  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. </head>
  8. <style>
  9.     *{
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing: border-box;
  13.     }
  14.     .container{        
  15.         width: 600px;         
  16.     }
  17.     .item{
  18.         width: 195px;
  19.         height: 200px;       
  20.         float: left; 
  22.         margin-left: 3px;
  23.         margin-top: 3px;
  24.     }
  25.     .container > .item:nth-of-type(1){             
  26.         background-color:yellow;  /*背景颜色 */   
  27.         padding: 20px;  
  28.         border: 5px dotted black;
  29.         background-clip:padding-box;  /*内容在背景被裁剪到内边距框 */  
  31.     }   
  32.      .container > .item:nth-of-type(2){             
  33.         background-color:yellow;  /*背景颜色 */   
  34.         padding: 50px;  
  35.         padding: 20px;  
  36.         border: 5px dotted black;
  37.         background-clip:border-box;  /*背景被裁剪到边框盒 */   
  39.     }
  41.      .container > .item:nth-of-type(3){             
  42.         background-color:yellow;  /*背景颜色 */   
  43.         padding: 20px;  
  44.         border: 5px dotted black;  
  45.         background-clip:content-box;  /*内容在背景被裁剪到内容框 */       
  48.     }
  49.      .container>.item:nth-of-type(4){
  50.         background-image: url("image/1.jpg"); /*设置背景图片*/
  51.         background-repeat: no-repeat; /*背景图片不重复*/
  52.         background-size: 100px ;     /*背景图片长设定一个值，宽则为auto*/
  53.         border: 1px solid #000;
  55.     }
  56.     .container>.item:nth-of-type(5){
  57.         background-image: url("image/2.jpg"); /*设置背景图片*/
  58.         background-repeat: repeat-x; /*背景图片水平重复*/
  59.         background-size: 50px ;     /*背景图片长设定一个值，宽则为auto*/
  60.          border: 1px solid #000;
  61.     }
  62.      .container>.item:nth-of-type(6){
  63.         background-image: url("image/2.jpg"); /*设置背景图片*/
  64.         background-repeat: repeat-y; /*背景图片垂直重复*/       
  65.         background-size: contain;  /*把背景图片扩展至最大尺寸、完全适应内容区域*/
  66.         background-size: cover;    /*把背景图片扩展至最大尺寸、完全覆盖背景区域*/
  67.         background-size: 150px;    /*背景图片长设定一个值，宽则为auto*/
  68.         background-size: 180px 180px; /*背景图片设定图片大小*/
  69.         background-size: 50px ;     /*背景图片长设定一个值，宽则为auto*/
  70.         border: 1px solid #000;
  71.     }
  72.     .container>.item:nth-of-type(7){
  73.         border: 1px solid #000;
  74.         background-image:url(image/5.jpg); /*设置背景图片*/  
  75.         background-size: 50px ;
  76.         background-repeat: no-repeat;
  77.         background-position: 50px 60px;   /*背景图片定位左边距50px，顶边距60px*/
  78.         background-position: 20%;         /*背景图片定位只写一个，第二个默认center*/
  80.     }
  81.      .container>.item:nth-of-type(8){
  82.         border: 1px solid #000;
  83.         background-image:url(image/5.jpg);  /*设置背景图片*/
  84.         background-size: 50px ;
  85.         background-repeat: no-repeat;
  86.         background-position:left;
  87.     }
  88.      .container>.item:nth-of-type(9){
  89.         border: 1px solid #000;
  90.         background-image:url(image/5.jpg);  /*设置背景图片*/
  91.         background-size: 50px ;
  92.         background-repeat: no-repeat;      
  93.         background-position: right; /*背景图片定位右垂直居中，前后顺序无限制、*/
  96.     }
  98.    .container>.item:nth-of-type(10)
  99. {
  100.         background: linear-gradient(red, yellow);         /*红色和黄色渐变*/
  101.         background: linear-gradient(45deg, red, yellow);  /*45度角红色和黄色的渐变*/
  102.         background: linear-gradient(to right, red, yellow); /*从左到右的渐变*/
  103.         background: linear-gradient(
  104.           to left,
  105.           rgba(255, 0, 0, 0.5),  /*0.5表示透明度*/
  106.           white,
  107.           yellow,
  108.           white,
  109.           yellow
  110.         );                                                      /*多种颜色从右到左的渐变*/
  111.         border: 1px solid #000;
  113. }
  114. .container>.item:nth-of-type(11){
  115.        box-shadow: 3px 3px 10px #111;                         /*设定盒子的阴影效果*/
  116.        border: 1px solid #000;
  117.        border-radius: 100px;                                    /*设定盒子边框圆角*/
  118. }
  119. .container>.item:nth-of-type(12){
  120.        box-shadow: 3px 3px 10px #111;                         /*设定盒子的阴影效果*/
  121.        border: 1px solid #000;
  122.        border-radius: 5px;                                    /*设定盒子边框圆角*/
  123.        background-image: url("image/4.jpg");
  124. }
  125. .container>.item:hover{                         
  126.       box-shadow: 2px 2px 10px #666;         /*鼠标移到元素出现阴影*/
  127.       cursor: pointer;                         /*设定鼠标样式*/
  128. }
  129. </style>
  130. <body>
  131.     <div class="container">
  132.         <div class="item">background-clip:padding-box; /*内容在背景裁剪到内边距框 */</div>
  133.         <div class="item">background-clip:border-box;   /*背景被裁剪到边框盒 */ </div>
  134.         <div class="item">background-clip:content-box; /*内容在背景被裁剪到内容框 */</div>
  135.         <div class="item"></div>
  136.         <div class="item"></div>
  137.         <div class="item"></div>
  138.         <div class="item"></div>
  139.         <div class="item"></div>
  140.         <div class="item"></div>      
  141.         <div class="item"></div>  
  142.         <div class="item"></div>   
  143.          <div class="item"></div>
  144.     </div>
  146. </body>
  147. </html>

综合示例图

精灵图的原理与实现

  • 把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”,”background-repeat”,”background-position”的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。

优点：

  1. 减少网页的http请求，从而加快了网页加载速度，提高用户体验。

  2. 减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。

  3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。

  4. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

缺点：

  1. 在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。

  2. CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置。

  3. 在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。

  4. 精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，Css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图。

实例

  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. </head>
  8. <style>
  9.     *{
  10.         margin: 0;
  11.         padding: 0;
  12.         box-sizing:border-box;
  13.     }
  14.     .box{
  15.         width: 600px;
  16.         overflow: hidden;
  17.     }
  18.     .box >.item:nth-of-type(1){        
  19.         width: 105px;
  20.         height: 115px;
  21.         background-image: url("image/7.png");
  22.         background-repeat: no-repeat;
  23.         background-position: 0px -272px;    
  24.         float: left;    
  26.     }
  27.     .box >.item:nth-of-type(2){        
  28.         width: 115px;
  29.         height: 113px;
  30.         background-image: url("image/7.png");
  31.         background-repeat: no-repeat;
  32.         background-position: -368px -273px;       
  33.         float: left; 
  35.     }
  36.      .box >.item:nth-of-type(3){        
  37.         width: 110px;
  38.         height: 113px;
  39.         background-image: url("image/7.png");
  40.         background-repeat: no-repeat;
  41.         background-position: 0px -555px;       
  42.         float: left; 
  44.     }
  45.      .box >.item:nth-of-type(4){        
  46.         width: 105px;
  47.         height: 113px;
  48.         background-image: url("image/7.png");
  49.         background-repeat: no-repeat;
  50.         background-position: -479px 0px;       
  51.         float: left; 
  53.     }
  54.     .image{
  55.         width: 400px;
  56.         height: 450px;     
  57.         margin-top: 150px;   
  58.         background-image: url("image/7.png");
  59.         background-repeat: no-repeat;
  60.         border: 1px solid #000;       
  61.         background-size: 400px 450px;
  62.         background-position: 0px 0px;  
  65.     }
  66. </style>
  67. <body>
  68.     <div class="box">
  69.           <div class="item"></div>
  70.           <div class="item"></div>
  71.           <div class="item"></div>
  72.           <div class="item"></div>
  73.           <div class="image"></div>
  74.     </div>
  76. </body>
  77. </html>

示例图

阿里图标的完整引用流程

1. 访问 http://www.iconfont.cn 阿里巴巴图标矢量库中创建账号并登陆。

2. 选择你想要的图标添加到购物车（也就是添加入库）。

3.点击购物车下载代码

4.解压后并更改下载图标文件名

5.引入阿里图标CSS文件。

6.网页中展示阿里图标

实例

  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.     <link rel="stylesheet" href="css/font-icon.css" />
  8.     <script src="js/iconfont.js"></script>
  9.     <title>阿里字体图标的使用方法</title>
  10.   </head>
  11.   <style>
  12.     * {
  13.       margin: 0;
  14.       padding: 0;
  15.       box-sizing: border-box;
  16.     }
  17.     .footer {
  18.       position: fixed;
  19.       bottom: 0px;
  20.       height: 60px;
  21.       width: 100%;
  22.       background-color: #333;
  23.       display: flex;
  24.       overflow: hidden;
  25.     }
  26.     .footer > a {
  27.       width: 20%;
  28.       flex-flow: row nowrap;
  29.       color: white;
  30.       text-align: center;
  31.       text-decoration: none;
  32.       font-size: 14px;
  33.       padding-top: 5px;
  34.     }
  35.     .footer > a:hover {
  36.       color: yellowgreen;
  37.     }
  39.     .footer > a > span {
  40.       font-size: 30px;
  41.       padding-top: 0px;
  42.       display: block;
  43.     }
  44.     .open {
  45.       width: 150px;
  46.       margin: 0 auto;
  47.       display: block;
  48.     }
  49.     .open > span {
  50.       font-size: 50px;
  51.     }
  52.     .icon {
  53.       width: 50px;      
  54.       vertical-align: -0.15em;
  55.       fill: currentColor;
  57.     }
  58.   </style>
  59.   <body>
  60.     <div class="footer">
  61.       <a href=""><span class="iconfont icon-shouye"></span>首页</a>
  62.       <a href=""><span class="iconfont icon-zuzhijiagou"></span>组织</a>
  63.       <a href=""><span class="iconfont icon-caidan"></span>菜单</a>
  64.       <a href=""><span class="iconfont icon-dingwei"></span>定位</a>
  65.       <a href=""
  66.         ><span class="iconfont icon-yonghu_zhanghao_wode"></span>我的</a
  67.       >
  68.     </div>
  69.     <div class="open">
  70.       <span class="iconfont">&#xe651;</span> 
  71.     </div>
  73.     <div class="open">
  74.       <svg class="icon" aria-hidden="true">
  75.         <use xlink:href="#icon-yincang"></use> 
  76.       </svg>
  77.     </div>
  78.   </body>
  79. </html>

示例图

上一条：前端实例：用户注册下一条：百度网站首页PC端
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多