Thuộc tính clip

Thuộc tính clip cho phép cắt xén một phần tử được định vị tuyệt đối, chỉ để lại một vùng hình chữ nhật được chỉ định là có thể nhìn thấy. Giá trị được xác định bằng cách sử dụng hàm rect.

Cú pháp

cssbộ chọn {
  clip: rect(trên, phải, dưới, trái) | auto;
}

Chuẩn bị hình ảnh

Giả sử chúng ta có một bức ảnh thiên nhiên mà chúng ta sẽ cắt xén:

html<img src="image.jpg" width="500">

Результат:

Ví dụ

Hãy cắt xén hình ảnh, chỉ để lại phần trung tâm có thể nhìn thấy:

html<div class="container">
  <img class="image" src="image.jpg">
</div>

css.container {
  position: relative;
  width: 400px;
  height: 300px;
}
.image {
  position: absolute;
  clip: rect(50px, 350px, 250px, 50px);
  width: 400px;
  height: 300px;
}

Результат:

Xem thêm