本篇内容介绍了“CSS实现切割图片只取图片中一部分”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
切割图片这里不是真正的切割，只是用CSS取图片中的一部分而已。这样做的好处就是减少了打开网页时请求图片的次数。主要有两种方式，一是做为某一元素的背景图片，二是用img元素的属性。
方法一：
用CSS中元素的background : background-color || background-image || background-repeat || 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处（以图片的左上角为0,0）
方法二：
用img的clip属性中的rect，clip:rect(y1 y1 x2 x1)参数说明如下：
y1=定位的y坐标(垂直方向)的起点
x1=定位的x坐标(水平方向)的起点
y2=定位的y坐标(垂直方向)的终点
x2=定位的x坐标(水平方向)的终点
注:坐标的起点是在左上角
示例代码：
代码如下:
img{
position:absolute;
clip:rect(20px 100px 50px 20px);
}
上面可以看出控制图片显示的关键在于clip:rect(20px 100px 50px 20px)这句，千万不要忘记position:absolute;这是用于使用绝对值来定位元素。
“CSS实现切割图片只取图片中一部分”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
