在CSS中，裁剪圖片通常使用background-image屬性，通過background-position和background-size兩個屬性來實現。 首先，我們需要選擇要裁剪的圖片作為背景。可以使用以下樣式將圖片設置為元素的背景：

.element {
background-image: url('image.jpg');
}

接下來，我們可以使用background-position屬性來定義裁剪的起點。該屬性使用像素值或百分比值來定位背景圖像。

.element {
background-image: url('image.jpg');
background-position: -50px -30px; /* X和Y偏移量 */
}

在上面的示例中，背景圖像將從左側和頂部向右和向下移動50和30個像素，因此被裁剪的部分位于左上角。 為獲得更準確的裁剪，我們可以使用百分比值來定義裁剪位置。以下示例將圖像的50％和30％的位置設置為起點位置，使其釘在元素的中心。

.element {
background-image: url('image.jpg');
background-position: 50% 30%; /* 水平和垂直位置上的百分比 */
}

最后，使用background-size屬性控制背景圖像的尺寸。在本例中，可以將其設置為裁剪后所需的大小。

.element {
background-image: url('image.jpg');
background-position: 50% 30%;
background-size: 200px 200px; /* 寬度和高度 */
}

通過使用像素或百分比值的組合，可以使用CSS輕松地裁剪圖像并控制其大小和位置。