css 截取图片中间部分

CSS是一门非常强大的样式语言，可以实现各种各样的效果。其中一项比较实用的技巧是在网页上截取一张图片的中间部分显示。

有时候，一张完整的图片并不适合用在网页上，我们只需要其中的一部分。比如一张个人头像图片，我们只需要截取其中的正中间部分作为缩略图就可以了。

那么，如何实现这个效果呢？其实很简单，只需要利用CSS中的background-position属性就可以了。代码如下：

div {
    width: 100px;
    height: 100px;
    background: url(image.jpg) center center no-repeat;
    background-size: cover;
}

这里我们以一个div元素为例，设置元素的宽和高，然后在背景中设置图片的URL，使用center center指定要显示的位置在图片的正中间，同时使用no-repeat属性确保图片不会重复出现。而background-size:cover则是为了让图片适应div元素的大小。

通过这样的方式，我们就可以非常方便地截取图片中间部分作为缩略图来使用了。当然，如果你需要截取其他位置的部分，只需要调整background-position的值就可以了。