CSS背景控制与精灵图、及阿里字体图标引用实战

1.CSS背景控制

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

实现代码
background-color：

   <style type="text/css">
    .list_1{width: 100px;height: 100px;background-color: turquoise;}
    .list_2{width: 100px;height: 100px;background-color: violet;}
    .list_3{width: 100px;height: 100px;background-color: yellowgreen;}
    </style>
    <body>
    <p class="list_1"></p>
    <p class="list_2"></p>
    <p class="list_3"></p>
    <p class="list_4"></p>
</body>

例图：
background-image：

    <style type="text/css">
    /* .list_1{width: 100px;height: 100px;background-color: turquoise;}
    .list_2{width: 100px;height: 100px;background-color: violet;}
    .list_3{width: 100px;height: 100px;background-color: yellowgreen;} */
    .list_4{background-image:url(2.jpg);width: 38px;height: 35px;}
    </style>
</head>
<body>
    <p class="list_1"></p>
    <p class="list_2"></p>
    <p class="list_3"></p>
    <p class="list_4"></p>
</body>

例图：
background-repeat:

    <style type="text/css">
    /* .list_1{width: 100px;height: 100px;background-color: turquoise;}
    .list_2{width: 100px;height: 100px;background-color: violet;}
    .list_3{width: 100px;height: 100px;background-color: yellowgreen;}
    .list_4{background-image:url(2.jpg);width: 38px;height: 35px;} */
    body{background-image: url(2.png);background-repeat: no-repeat;}
    </style>
</head>
<body>
    <p class="list_1"></p>
    <p class="list_2"></p>
    <p class="list_3"></p>
    <p class="list_4"></p>
</body>

例图：

|background-position：

    <style type="text/css">
    /* .list_1{width: 100px;height: 100px;background-color: turquoise;}
    .list_2{width: 100px;height: 100px;background-color: violet;}
    .list_3{width: 100px;height: 100px;background-color: yellowgreen;}
    .list_4{background-image:url(2.jpg);width: 38px;height: 35px;} */
    /* body{background-image: url(2.png);background-repeat: no-repeat;} */
    .list_5{width: 300px;height: 300px;background-color: tomato;background-image:url(2.jpg);
        background-repeat: no-repeat;
        background-position: right;
    }
    </style>
</head>
<body>
    <p class="list_1"></p>
    <p class="list_2"></p>
    <p class="list_3"></p>
    <p class="list_4"></p>
    <p class="list_5"></p>
</body>

例图：

2.精灵图

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

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

 <style>
     .box1 {
       width: 600px;
       height: 500px;
       border: 1px solid black;
       background-image: url("22.jpg");
       background-repeat: no-repeat;
       background-position: 50px 20px;
     }
     .box2 {
       width: 66px;
       height: 66px;
       float: left;
       background-image: url("22.jpg");
       background-repeat: no-repeat;
       background-position: -340px -96px;
     }
     .box3 {
       width: 66px;
       height: 66px;
       float: left;
       background-image: url("22.jpg");
       background-repeat: no-repeat;
       background-position: 0px -284px;
     }
     .box4 {
       width: 66px;
       height: 66px;
       float: left;
       background-image: url("22.jpg");
       background-repeat: no-repeat;
       background-position: 0 -96px;
     }
   </style>
</head>
<body>
 <div class="box1"></div>
 <div>
   <div class="box2"></div>
   <div class="box3"></div>
   <div class="box4"></div>
 </div>
</body>

例图：

3.阿里字体图标引用

    <style>
      .hot {
        font-size: 66px;
        color: coral;
      }
      .cart {
        font-size: 56px;
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="iconfont icon-rexiaochanpin hot"></span>
      <span class="iconfont icon-gouwuchekong cart">购物车</span>
    </div>
  </body>

例图：

4.总结

掌握背景控制的方法，会移动和修改背景图片。
精灵图的偏移距离要理解起始点的位置。
掌握阿里字体图标引用。

1.CSS背景控制

2.精灵图

3.阿里字体图标引用

4.总结

相关文章