在前端開發中，經常會有需要對圖片進行裁剪和選擇的需求。而利用CSS可以很方便地實現這一功能。CSS提供了 background-position 屬性，可以在一個元素的背景中選擇一個子區域進行顯示。以下是使用CSS在圖片中選擇區域顯示的示例代碼：

img {
display: block;
width: 500px;
height: 300px;
background-image: url('example.jpg');
background-size: 1000px 600px;
background-position: -250px -150px; /* 選擇位于中心的區域 */
}

以上代碼中，首先需要設置一個 img 元素，并設置其寬度和高度。同時設置其背景圖片為 example.jpg。接著通過 background-size 屬性設置背景圖片的真實大小，以便我們能夠以比例為基準選擇一個子區域。最后使用 background-position 屬性選擇一個具體的子區域，此處選擇的是圖片中心的區域。 如果需要選擇一個不同的區域，只需要修改 background-position 即可。例如，如果要選擇左上角的區域，只需將 background-position 設置為 0 0。如果要選擇右下角的區域，只需將 background-position 設置為 -500px -300px。 除了 background-position 外，還可以利用 CSS3 的 clip-path 屬性來實現更加復雜的效果。 clip-path 可以定義一個路徑來裁剪元素。以下是使用 clip-path 實現圖片裁剪的示例代碼：

img {
display: block;
width: 500px;
height: 300px;
clip-path: polygon(0 0, 0 200px, 200px 200px, 200px 0);
}

以上代碼中，通過 clip-path 屬性定義了一個四邊形路徑來裁剪圖片，這個四邊形的左上角坐標為 (0, 0)，右上角坐標為 (200px, 0)，右下角坐標為 (200px, 200px)，左下角坐標為 (0, 200px)。 以上是利用CSS實現圖片選擇區域顯示的簡介。通過使用 background-position 和 clip-path 屬性，可以輕松實現圖片的裁剪和選擇效果。