css中有一个属性叫做clip,用于修剪裁剪.配合其属性关键字rect可以实现元素的矩形裁剪效果.
top right bottom left 分别指最终裁剪可见区域的上边,右边,下边,左边.而所有的数值都表示位置,且是相对于原始元素的左上角而言的
注意:clip:rect矩形剪裁只能作用于position:absolute
的元素上。
rect(60px 200px 280px 40px)
表示的含义就是:
top 60px 由上向下共裁剪图片60像素
right 200px 由右向左裁剪至图片宽度为200像素 将图片原本宽度 200px(以原图片左边缘计算) 以外 的内容裁剪掉
bottom 280px 由下向上裁剪至图片高度为100像素 将图片原本高度 280px(以原图片上边缘计算) 以下 的内容裁剪掉
left 40px 由左向右共裁剪图片40像素
以某联赛图片为例 裁剪前图片 640 × 447 px
裁剪后
注意:clip:rect矩形剪裁只能作用于position:absolute
的元素上。
由于clip属性与图片本身高度宽度有关 所以如果想要实现自动裁剪 这个时候我们需要用到js函数
因时间已到深夜后面的有缘再补上