CSS从大图中抠图然后显示其中的一部分

相信大家在使用css时会遇到一个情况吧 就是一张大图片里面什么都有 各种图标都有 然而自己就是不太会使用其中的小图标 这是我最近的一次学习 首先上图

这么大一张图片 那么这么使其只显示一部分 并且为我所用勒 这是上代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0px;
                padding: 0px;
            }
            #image{
                width: 40px;
                height: 40px;
                background-image: url(img/su.jpg);
                background-repeat: no-repeat;
                background-position: -200px -240px;
                /*申明 大图片是有了 40px一个 每个直接间距为40px 而且第一个表示距离x的距离 第二个表示距离y的距离*/
            }
        </style>
    </head>
    <body>
        <diV id="image">
            
        </diV>
    </body>
</html>

核心的代码是 

<style>
            #image{
                width: 40px;
                height: 40px;
                background-image: url(img/su.jpg);
                background-repeat: no-repeat;
                background-position: -200px -240px;
                /*申明 大图片是有了 40px一个 每个直接间距为40px 而且第一个表示距离x的距离 第二个表示距离y的距离*/
            }
        </style>
        <diV id="image">
            
        </diV>

这里将div设置为id为image 而且这个文件的路径url(img/su.jpg)这些都必须设置好 这样就能够使用这个大图片了

显示效果是这样的

 

posted @ 2018-05-05 14:20  coder-zhou  阅读(2942)  评论(0)  编辑  收藏  举报