css怎样把一张图片分割开

280 阅读 0 评论 185 点赞

我是靠谱客的博主孝顺学姐，这篇文章主要介绍css怎样把一张图片分割开，现在分享给大家，希望可以做个参考。

本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。

场景：如果一个页面有个img小图标，那么访问浏览器的时候会因为加载图片导致浏览速度放慢。这个时候将这么多的小图标放在一起，整合成一个img，那么只需要访问一张图片就可以了。就可以减少请求图片的次数

1.webp.jpg
整合后的img

那么整合后的img有了，在使用的过程中如何获取我们想要的像素范围呢？上面的参考地址有写。我就照着做一遍吧。

方法一

在CSS中元素的background:background-color || background-image || background-repeate || background-attachment || background-position，示例如下：

但是我发现上面的不适合我想要的，

2.webp.jpg

上面的效果来看只能显示图片的右下角。那再试试第二种方法

方法二

用 img 的 clip 属性中的 rect ,clip:rect(y1,y2,x2,x1)参数说明如下

y1 = 定位的 y 坐标（垂直方向）的起点

y2 = 定位的 y 坐标（垂直方向）的终点

x1 = 定位的 x 坐标（垂直方向）的起点

x2 = 定位的 x 坐标（垂直方向）的终点

注意：坐标的起点是在左上角

代码如下：

    img{
        position:absolute;
        clip:rect(20px ,100px , 50px , 20px);
}
登录后复制

3.webp.jpg

在实际操作过程中，发现两个问题：1.rect方法里面需要带上逗号，2.必须要带上position，并且需要是绝对定位，也就是absolute 或者 fixed属性。

以上就是孝顺学姐最近收集整理的关于css怎样把一张图片分割开的全部内容，更多相关css怎样把一张图片分割开内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。