zoukankan      html  css  js  c++  java
  • 前端 精灵图

    精灵图

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>精灵图案例</title>
        <style>
            /*精灵图就是操作大图在显示区域的位置*/
            .box {
                 500px;
                height: 100px;
                background-color: orangered;
                border: solid;
            }
            .box {
                background-image: url("img/bg.png");
                background-position-y: -150px;
            }
            .box:hover {
                cursor: pointer;
                background-position-y: -250px;
            }
        </style>
        <style>
            .b1 {
                 155px;
                height: 48px;
                border: solid;
                background-image: url("img/bg.png");
            }
            .b1:hover {
                cursor: pointer;
                background-position-y: -48px;
            }
        </style>
        <style>
            .b2 {
                 157px;
                height: 48px;
                border: solid;
                background-image: url("img/bg.png");
                background-position: -155px 0;
            }
            .b2:hover {
                cursor: pointer;
                background-position: -155px -48px;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    
        <div class="b1"></div>
    
        <div class="b2"></div>
    </body>
    </html>
    
  • 相关阅读:
    python分布式进程
    python协程
    python线程同步
    Linux内核-链表
    java基础-003
    java基础-002
    JVM-class文件完全解析-魔数
    JVM-JDK命令行工具
    JVM-类文件结构
    Linux内核-模块编译和安装
  • 原文地址:https://www.cnblogs.com/bladecheng/p/11284513.html
Copyright © 2011-2022 走看看