CSS 如何截取部分圖片？

在網(wǎng)頁設計中，圖片是不可或缺的元素，而有時候我們需要截取部分圖片，以適應設計需求。在 CSS 中，有三種方式可以截取部分圖片。

1. 使用 background-size 屬性

通過設置 background-image 和 background-size 屬性，我們可以將圖片截取成指定的大小。

.box {
width: 200px;
height: 200px;
background-image: url('example.jpg');
background-size: cover; /* 可以設置為 contain、100% 100% 等 */
}

2. 使用 Clip Path 屬性

Clip Path 屬性可以通過指定圖形路徑，讓圖片截取成不同的形狀。下面是一個截取成圓形的例子：

.box {
width: 200px;
height: 200px;
background-image: url('example.jpg');
clip-path: circle(50%); /* 可以指定為其他路徑 */
}

3. 使用 object-fit 屬性

Object-fit 屬性可以讓圖片適應其容器的大小，并決定如何填充容器。下面是一個截取成中心部分例子：

.box {
width: 200px;
height: 200px;
overflow: hidden;
}
.img {
width: 100%;
height: 100%;
object-fit: cover; /* 可以設置為 contain、fill、scale-down、none */
}

以上就是 CSS 中截取部分圖片的三種方法，每種方法都有其特定的應用情境，可以根據(jù)需要靈活運用。