如何使用 HTML 和 CSS 只顯示圖片的一部分？

在HTML/CSS 中僅顯示影像的一部分

在Web 開發中，僅顯示影像的特定部分，同時保留其使用CSS 可以實現完整性。

使用 CSS 剪輯屬性

如問題中所提到的，CSS 有一個 Clip 屬性。然而，它要求被裁剪的元素絕對定位，限制了其靈活性。

.container {
  position: relative;
}

#clip {
  position: absolute;
  clip: rect(0, 100px, 200px, 0);
}

在這個例子中，ID為「clip」的圖像將只顯示原始250x250px圖像的中心50x50px部分.

注意： Clip🎜>

注意： Clip 屬性使用以下語法： rect(top, right,底部，左側）。在本例中，我們為頂部和左側值指定 0，並為右側值指定 100px，為底部值指定 200px。

使用 CSS url() 參考

對於 CSS url() 引用，目前沒有內建方法可以只顯示圖片的一部分。

以上是如何使用 HTML 和 CSS 只顯示圖片的一部分？的詳細內容。更多資訊請關注PHP中文網其他相關文章！