CSS圖片截取指的是在預設的坐標軸上裁剪/截取圖片的某一部分，以此來制作更加精美的圖像效果。使用CSS圖片截取技術，可以輕松地將需要的部分切割出來，并且可以在任何設備和瀏覽器上進行展示。

img {
clip: rect(0px, 100px, 100px, 0px);
}

在上述代碼中，我們使用了clip屬性來截取圖片的一部分。clip屬性需要接收一個rect()函數，該函數定義了截取區域的坐標軸（在左、上、右、下的順序中定義）。

通過修改傳遞給rect()函數的參數可以輕松地調整截取區域的大小和位置。以下是一些可用參數:

• 左側：定義切出區域的左側坐標位置
• 上部：定義切出區域的上部坐標位置
• 右側：定義切出區域的右側坐標位置
• 下部：定義切出區域的下部坐標位置

在CSS中，我們也可以使用偽元素（:before和:after）來截取圖片。以下是代碼示例:

div::after {
content: "";
display: block;
width: 200px;
height: 200px;
background: url(bg.png) no-repeat;
background-position: -50px -50px;
clip: rect(0px, 100px, 100px, 0px);
}

上述代碼中，我們使用了偽元素::after來制作截取后的圖像，并使用clip屬性來定義截取區域的位置。在偽元素中使用clip屬性時，需要確保該元素具有尺寸，否則clip屬性會無效。

總之，CSS圖片截取允許我們對所需部分進行裁剪，并實現類似于縮略圖、特定頁面效果等功能。熟練掌握這一技術，可以讓我們的網頁制作更加優雅和專業。