zoukankan      html  css  js  c++  java
  • 8.使用背景图,制作雪碧图效果

    使用背景图,制作雪碧图效果:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- reset.css文件内容参考:https://www.cnblogs.com/lanshanxiao/p/12663192.html -->
        <link rel="stylesheet" href="./reset.css">
        <style>
            .img{
                width:150px;
                height:150px;
                border:2px solid;
                background-image:url("https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=382503044,3585482793&fm=26&gp=0.jpg");
                background-repeat: no-repeat;
                background-position:-160px -80px;
            }
        </style>
    </head>
    <body>
        <div class="img">
    
        </div>
    </body>
    
    </html>
    index.html

    原图展示:

    我们要从上面的图片中抠取出太阳来当做背景图片。

    效果展示:

  • 相关阅读:
    021 顺时针打印矩阵
    020 二叉树的镜像
    019 树的子结构
    018 机器人的运动范围
    017 矩阵中的路径
    022 Jquery总结
    003 css总结
    002 html总结
    016 合并两个排序的链表
    015 反转链表
  • 原文地址:https://www.cnblogs.com/lanshanxiao/p/12676212.html
Copyright © 2011-2022 走看看