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

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

发布时间：2019-12-07 点击：338

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

如果让你只取其中一个图标，你是否在想用软件分割呢，其实并不用，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)

迷糊馆

搜索

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

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

相关链接

相关推荐

评论区

搜索

图文推荐

热门文章

随机推荐

题库内容推荐