学习不止眼前的教程与笔记 还需实践与创新
[设为首页] [加入收藏]

搜索

温馨提示：本处只能搜索图文,搜题目请进题库

首页>>网站建设>>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)    

相关链接

相关推荐

搜索

温馨提示：本处只能搜索图文,搜题目请进题库

图文推荐

热门文章