学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>css>>经验笔记>>

css如何让图片只显示一部分

发布时间:2019-12-07点击:

    在网站设计编辑中,我们会往往取网上找图片素材,但是呢,找到的图片素材都在一张图片上,就比如说图标,图片如下:

    如果让你只取其中一个图标,你是否在想用软件分割呢,其实并不用,css就可以实现只取其中之一并且不需要裁剪,步骤如下:

    第一步:量出图标大小以及图标左上角位置

    这里我们取第一行第二个图标显示,图标大小37X38,左上角位置为:82X22

    第二步:设置显示div的大小为图标大小

    <html>
    <head></head>
    <body>
    <style>
    .show{
            width:37px;
            height:38px;
    }
    </style>
    <div class="show"></div>
    </body>
    </html>

    第三步:设置div的背景图片为图标素材,并且显示图片素材中第二个图标的位置

    <html>
    <head></head>
    <body>
    <style>
    .show{
            background:transparent url(/images/2.png) no-repeat scroll -82px -22px ;
            width:37px;
            height:38px;
    }
    </style>
    <div class="show"></div>
    </body>
    </html>

    显示如下:

    是不是很神奇,其实主要靠的是其中

    background:transparent url(/images/2.png) no-repeat scroll -82px -22px ;
    其中

    background:transparent表示div背景透明,然后

    url(/images/2.png)表示设置div的背景为图标素材图片

    no-repeat 表示图片不重复

    scroll -82px -22px 表示背景图片左边移动82个像素,向上移动22个像素,也就是说从x:82px y:22px开始显示图片

    然而div只有一个图标的大小,所以显示出来的就只有一个图标大小,其余部分均为不可见。

    其实还有另一个方法可以实现该功能,就是利用img的clip:rect函数,详情见:http://www.mihuguan.com/article/157579208375.html

赞一个(0)     踩一个(0)    

相关链接

搜索

昵称:*
邮箱:
电话:
评论: