扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
怎么在cs中分割图片？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
创新互联专业为企业提供桐庐网站建设、桐庐做网站、桐庐网站设计、桐庐网站制作等企业网站建设、网页设计与制作、桐庐企业网站模板建站服务，十年桐庐做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
场景：如果一个页面有个img小图标，那么访问浏览器的时候会因为加载图片导致浏览速度放慢。这个时候将这么多的小图标放在一起，整合成一个img，那么只需要访问一张图片就可以了。就可以减少请求图片的次数
方法一
在CSS中元素的background:background-color || background-image || background-repeate || background-attachment || background-position，示例如下：
background:transparent url(123.jpg) no-repeat scroll -140px -20px;
transparent 表示透明度无颜色
url(123.jpg) 表示背景图片
no-repeat 表示图片不重复
scroll 表示背景图片随浏览器下拉而滚动
-140px 表示水平位置在图片的-140px处（以图片的左上角为0,0）
-20px 表示垂直位置在图片的-20px处
但是我发现上面的不适合我想要的，
上面的效果来看只能显示图片的右下角。那再试试第二种方法
方法二
用 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);
}
在实际操作过程中，发现两个问题：1.rect方法里面需要带上逗号，2.必须要带上position，并且需要是绝对定位，也就是absolute 或者 fixed属性。
关于怎么在cs中分割图片问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联行业资讯频道了解更多相关知识。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网