H5雪碧图

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <style>
        /*空格 后代选择器 对选中的标签的所有下级都有作用*/
        #container > div{
            color: red;
            width: 25px;
            height: 25px;
            background-image: url("../../img/xuebitu.gif");
            background-repeat: repeat-y;
        }
        #div2{
            background-position: -42px 0;
        }
        #div3{
            background-position: 0 -127px;
        }
        #div4{
            height: 300px;
            background-color: blue;
            background-image: url("../../img/xuebitu1.png");
        }
        /*子代选择器 用“>”锁定 */
        #ul>li{
            color: red;
        }
    style>
    <title>雪碧图title>
head>
<body>
<div id="container">
    <div>div>
    <div id="div2">div>
    <div id="div3">div>
div>
<ul id="ul">
    <li>1li>
    <ul>
        <li>1li>
        <li>2li>
        <li>3li>
    ul>
    <li>2li>
    <li>3li>
    <li>4li>
ul>
<div id="div4">
    
div>
body>

html>

通过定义一个div在范围内设置背景图截取想要的部分

通过图片移动来实现,移动方向为负

你可能感兴趣的:(HTML5)