Hướng dẫn

Cách trích xuất một phần hình ảnh bằng CSS

Minh Vy   0 Bình luận

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ốcMì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 CSSCách trích xuất một phần hình ảnh bằng CSS

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à:

Cách trích xuất một phần hình ảnh bằng CSS

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:

Cách trích xuất một phần hình ảnh bằng CSS

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à:

Cách trích xuất một phần hình ảnh bằng CSS

Chúc các bạn thành công.

Bài viết cùng chủ đề

Bình luận (0 bình luận)

Gọi điện thoại
0969 001 863