[Tự học CSS] – Tự học kỹ thuật trích xuất một phần hình ảnh bằng CSS

4211 lượt xem
Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, mình rất vui khi hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Ngày hôm nay, trong bài viết mới này mình sẽ giới thiệu và hướng dẫn các bạn một kỹ thuật trích xuất một phần hình ảnh từ CSS.  Hãy cùng theo dõi bài viết cực hay này nhé.

Trích xuất hình ảnh là gì mà hay đến vậy ?

Trích xuất hình ảnh là kỹ thuật lấy một phần hình ảnh

Ví dụ, mình có một tấm hình như phía dướiMình có thể trích xuất lấy ra một phần nhỏ

 

Kỹ thuật trích xuất hình ảnh

Để trích xuất một phần hình ảnh từ một tấm hình gốc, chúng ta sử dụng cú pháp như sau:

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

Ví dụ :

Đây là kết quả :

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  Do đó, 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

Cú pháp trích xuất hình ảnh phía trên tương đối dễ hiểu, riêng phần xác định tọa độ x y còn khá mới mẻ, có thể sẽ gây khó khăn cho bạn. Thế nên mình làm phần hướng dẫn này đễ giúp bạn biết cách xác định tọa độ.

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:

Thì phần hình ảnh được trích xuất trong tấm hình gốc sẽ là:

Lời Kết

Bài viết hướng dẫn của mình tới đây là hết rồi, mình mong rằng bài viết này sẽ có ích cho các bạn. Nếu có bất kỳ thắc mắc nào liên quan tới bài học thì hãy đừng ngại và comment vào phía dưới bài viết. Các bạn hãy chú ý theo dõi và cùng chờ đón những bài viết tiếp theo từ mình nhé. Cảm ơn các bạn đã theo dõi bào viết, chúc các bạn học tập thật tốt.

3/5 - (2 bình chọn)
Chia sẻ bài viết:

Thông báo chính thức: Ninh Bình Web (thuộc GiuseArt) không hợp tác với bất kỳ ai để bán giao diện Wordpress và cũng không bán ở bất kỳ kênh nào ngoại trừ Facebookzalo chính thức.

Chúng tôi chỉ support cho những khách hàng mua source code chính chủ. Tiền nào của nấy, khách hàng cân nhắc không nên ham rẻ để mua phải source code không rõ nguồn gốc và không có support về sau! Xin cám ơn!

Thẻ tìm kiếm:

Bài viết mới cập nhật:

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *