CSS_css裁剪,定位显示图片中某个位置

CSS中有一个属性叫做clip,为修剪,剪裁之意。配合其属性关键字rect可以实现元素的矩形裁剪效果。

top right bottom left分别指最终剪裁可见区域的上边,右边,下边与左边。而所有的数值都表示位置,且是相对于原始元素的左上角而言的。于是
在这里插入图片描述
在这里插入图片描述

.img {
	position:absolute;
	clip:rect(0px,60px,200px,0px);
}

rect(30px 200px 200px 20px)
表示的含义就是:
最终剪裁的矩形的上边距离原始元素的上边缘30像素;
剪裁矩形的右边缘距离原元素左边缘的距离是200像素;
剪裁矩形的下边缘距离原元素顶部的距离为200像素;
剪裁矩形的左边缘距离原元素左边缘的距离时20像素。

你可能感兴趣的:(#,CSS,css,前端,javascript)