HTML5、CSS雪碧图

来源：互联网发布：linux chgrp chown 编辑：程序博客网时间：2024/04/29 20:04

所谓的雪碧图就是在一整张图片中分割出自己想要的部分，也可理解为图片截取（坐标的移动）

利用background-position属性，改变图片的位置（想要的图片的移动位置）

图片截取都是从左上角的（0,0）坐标开始，所有需要把所需的图片移动想左、上移动，移动到所截取的图片的位置即可

<!DOCTYPE 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>

0 0