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
bộ 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:
<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:
<div class="container">
<img class="image" src="image.jpg">
</div>
.container {
position: relative;
width: 400px;
height: 300px;
}
.image {
position: absolute;
clip: rect(50px, 350px, 250px, 50px);
width: 400px;
height: 300px;
}
: