HTML5、CSS雪碧图

所谓的雪碧图就是在一整张图片中分割出自己想要的部分,也可理解为图片截取(坐标的移动)
利用background-position属性,改变图片的位置(想要的图片的移动位置)
图片截取都是从左上角的(0,0)坐标开始,所有需要把所需的图片移动想左、上移动,移动到所截取的图片的位置即可
html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        /*空格  :后代选择器(所有后代)*/
        #container div{
            width: 25px;
            height: 25px;
            color: red;
            background-image: url("../../img/icon.gif");
            background-repeat: no-repeat;
        }
        #div2{
            background-position:-42px 0;
        }
        #div3{
            background-position: -165px -25px;
        }
        #div4{
            background-position: 0 -169px;
        }
        #div5{
            background-position: -23px -288px;
        }

    style>
    <title>雪碧图title>
head>
<body>

<div id="container">
    <div>div>
    <div id="div2">div>
    <div id="div3">div>
    <div id="div4">div>
    <div id="div5">div>
div>

body>
html>

你可能感兴趣的:(HTML5+CSS)