- Code My Hello Kitty Cafe [Pekkle] MỚI NHẤT 2023 và cách nhập
- Clash Legends Codes (April 2023) PVP Update!
- Tinh chất ủ mụn OHIO Hàn Quốc giúp đánh bay 100% mụn đầu đen và mụn cám
- Review serum Maelove The Glow Maker – Vitamin C thuần chay rất được ưa chuộng hiện nay
- Review phim Kim Cương Máu: Tóm tắt Blood Diamond của Leonardo DiCaprio
Cách trích xuất một phần hình ảnh bằng CSS một cách cực đơn giản và dễ hiểu. Ngay bây giờ, hãy cùng Minh Vy đi tìm hiểu cách thực hiện ngay thôi nào.
Trích xuất hình ảnh bằng CSS là gì?
Trích xuất hình ảnh bằng CSS là kỹ thuật lấy một phần hình ảnh. Để giải thích rõ hơn thì mời các bạn xem ví dụ hình bên dưới đây.
Mình có hình ảnh gốc | Mình trích xuất lấy ra 1 phần nhỏ |
Cách trích xuất một phần hình ảnh bằng CSS
Để trích xuất một phần hình ảnh từ một tấm ảnh gốc các bạn sử dụng cú pháp như bên dưới đây:
width: giá trị; height: giá trị; background: url("đường dẫn đến tập tin hình ảnh") x y;
Trong đó:
- Width là chiều rộng phần hình ảnh mà bạn muốn trích xuất.
- Height là chiều cao phần hình ảnh mà bạn muốn trích xuất
- X là tọa độ bắt đầu trích xuất theo chiều ngang
- Y là tọa độ bắt đầu trích xuất theo chiều dọc.
Dưới đây là một ví dụ khi áp dụng vào website:
<!DOCTYPE html> <html> <head> <style type="text/css"> .turtle{ width:144px; height:65px; background:url(../public/home/img_demo/sprites.jpg) 144px 210px; } </style> </head> <body> <h3>Dưới đây là tấm hình gốc</h3> <img src="../public/home/img_demo/sprites.jpg"> <h3>Dưới đây là phần hình ảnh trích xuất, có kích thước 144x65</h3> <div class="turtle"></div> </body> </html>
Kết quả nhận được đó là:
LƯU Ý:
- Ở ví dụ trên, mình dùng thẻ <div> làm thùng chứa hiển thị hình ảnh trích xuất.
- Tuy nhiên thẻ <div> là phần tử khối, nên các phần tử nội tuyến không thể hiển thị bên cạnh nó được.
- Nếu muốn thẻ <div> hiển thị như một hình ảnh nội tuyến bình thường, ta phải thiết lập thuộc tính display với giá trị inline-block cho nó.
Kỹ thuật xác định tọa độ trích xuất
Để xác định được tọa độ ảnh x, y các bạn làm như sau. Hình dưới đây minh họa tọa độ điểm ảnh của một tấm hình có chiều rộng 25 pixel, chiều cao 15 pixel:
Nếu mình muốn trích xuất một phần hình ảnh của tấm hình phía trên theo cú pháp:
width: 5px; height: 3px; background: url("đường dẫn đến tập tin hình ảnh") 6px 10px;
Thì phần hình ảnh được trích xuất trong tấm hình gốc sẽ là:
Chúc các bạn thành công.