Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS背景控制与精灵图、及阿里字体图标引用实战
Blogger Information
Blog 13
fans 2
comment 0
visits 10343
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
CSS背景控制与精灵图、及阿里字体图标引用实战
北纬38
Original
863 people have browsed it

1.CSS背景控制

背景属性 说明
background-color 设置元素的背景颜色（值：color——name、hex_name\rgb_name）
background-image 设置背景图像
background-repeat 设置是否重复背景图像（repeat、left、right、center、%、px）
background-position 设置背景图像的起始位置

实现代码
background-color：

  1.    <style type="text/css">
  2.     .list_1{width: 100px;height: 100px;background-color: turquoise;}
  3.     .list_2{width: 100px;height: 100px;background-color: violet;}
  4.     .list_3{width: 100px;height: 100px;background-color: yellowgreen;}
  5.     </style>
  7.     <body>
  8.     <p class="list_1"></p>
  9.     <p class="list_2"></p>
  10.     <p class="list_3"></p>
  11.     <p class="list_4"></p>
  14. </body>

例图：
background-image：

  1.     <style type="text/css">
  2.     /* .list_1{width: 100px;height: 100px;background-color: turquoise;}
  3.     .list_2{width: 100px;height: 100px;background-color: violet;}
  4.     .list_3{width: 100px;height: 100px;background-color: yellowgreen;} */
  5.     .list_4{background-image:url(2.jpg);width: 38px;height: 35px;}
  6.     </style>
  7. </head>
  8. <body>
  9.     <p class="list_1"></p>
  10.     <p class="list_2"></p>
  11.     <p class="list_3"></p>
  12.     <p class="list_4"></p>
  13. </body>

例图：
background-repeat:

  1.     <style type="text/css">
  2.     /* .list_1{width: 100px;height: 100px;background-color: turquoise;}
  3.     .list_2{width: 100px;height: 100px;background-color: violet;}
  4.     .list_3{width: 100px;height: 100px;background-color: yellowgreen;}
  5.     .list_4{background-image:url(2.jpg);width: 38px;height: 35px;} */
  6.     body{background-image: url(2.png);background-repeat: no-repeat;}
  7.     </style>
  8. </head>
  9. <body>
  10.     <p class="list_1"></p>
  11.     <p class="list_2"></p>
  12.     <p class="list_3"></p>
  13.     <p class="list_4"></p>
  14. </body>

例图：

|background-position：

  1.     <style type="text/css">
  2.     /* .list_1{width: 100px;height: 100px;background-color: turquoise;}
  3.     .list_2{width: 100px;height: 100px;background-color: violet;}
  4.     .list_3{width: 100px;height: 100px;background-color: yellowgreen;}
  5.     .list_4{background-image:url(2.jpg);width: 38px;height: 35px;} */
  6.     /* body{background-image: url(2.png);background-repeat: no-repeat;} */
  7.     .list_5{width: 300px;height: 300px;background-color: tomato;background-image:url(2.jpg);
  8.         background-repeat: no-repeat;
  9.         background-position: right;
  10.     }
  11.     </style>
  12. </head>
  13. <body>
  14.     <p class="list_1"></p>
  15.     <p class="list_2"></p>
  16.     <p class="list_3"></p>
  17.     <p class="list_4"></p>
  18.     <p class="list_5"></p>
  19. </body>

例图：

2.精灵图

  • cbackground-image和background-position，background-image：url（引入图片的路径）；可以引入多张图，用逗号隔开即可。
  • background-position：x y；x和y是x轴上的偏移值，y是y轴上的偏移值

  • 与此同时还可以配合background-repeat和background-size进行精确把控。

    1.  <style>
    2.      .box1 {
    3.        width: 600px;
    4.        height: 500px;
    5.        border: 1px solid black;
    6.        background-image: url("22.jpg");
    7.        background-repeat: no-repeat;
    8.        background-position: 50px 20px;
    9.      }
    10.      .box2 {
    11.        width: 66px;
    12.        height: 66px;
    13.        float: left;
    14.        background-image: url("22.jpg");
    15.        background-repeat: no-repeat;
    16.        background-position: -340px -96px;
    17.      }
    18.      .box3 {
    19.        width: 66px;
    20.        height: 66px;
    21.        float: left;
    22.        background-image: url("22.jpg");
    23.        background-repeat: no-repeat;
    24.        background-position: 0px -284px;
    25.      }
    26.      .box4 {
    27.        width: 66px;
    28.        height: 66px;
    29.        float: left;
    30.        background-image: url("22.jpg");
    31.        background-repeat: no-repeat;
    32.        background-position: 0 -96px;
    33.      }
    34.    </style>
    35. </head>
    36. <body>
    37.  <div class="box1"></div>
    38.  <div>
    39.    <div class="box2"></div>
    40.    <div class="box3"></div>
    41.    <div class="box4"></div>
    42.  </div>
    43. </body>

    例图：

3.阿里字体图标引用

  1.     <style>
  2.       .hot {
  3.         font-size: 66px;
  4.         color: coral;
  5.       }
  6.       .cart {
  7.         font-size: 56px;
  8.         color: green;
  9.       }
  10.     </style>
  11.   </head>
  12.   <body>
  13.     <div>
  14.       <span class="iconfont icon-rexiaochanpin hot"></span>
  15.       <span class="iconfont icon-gouwuchekong cart">购物车</span>
  16.     </div>
  17.   </body>

例图：

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