Cắt ảnh với CSS


Một số trang web hiện nay đang áp dụng một kỹ thuật rất hay dùng để hiển thị hình ảnh lên trang web, đó là họ ghép toàn bộ các ảnh này lại thành một ảnh duy nhất và sau đó tùy thuộc vào vị trí mà họ có thể cắt ra được một phần của bức ảnh đó để sử dụng. Hãy thử tìm hiểu xem họ đã làm điều đó như thế nào?

Để hiểu rõ hơn về kỹ thuật này thì bạn hãy xem một ví dụ. Đây là hình ảnh lấy từ facebook dựa trên file CSS của nó

Các bạn dễ dàng nhận thấy logo cũng như tập hợp các icon của facebook được đặt thành một hàng nganh trong bức ảnh. Tuy nhiên khi hiển thị, Facebook chỉ cho chúng ta thấy một phần của bức ảnh đó mà thôi và làm cho người dùng tưởng rằng đó là các hình ảnh riêng biệt nhau, ví dụ những icon trong phần được đánh dấu bằng khung màu đỏ của hình sau:

image

Sau đây là cách thức thực hiện kỹ thuật này với một chút kiến thức về CSS và HTML. Trước tiên các bạn tạo ra một trang html để demo và chúng ta sẽ sử dụng chính hình ảnh ở trên của facebook để thao tác. Bạn có thể tải ảnh này về theo địa chỉ Ảnh Facebook trên Flickr.com. Đặt hình ảnh này và trang web của chúng ta tại cùng một vị trí trên đĩa để chương trình demo hoạt động bình thường.

Nội dung trang html bắt đầu của chúng ta là như sau:

<html>
<head>
<style type="text/css">
    .img_facebook
    {
        display:block;
        width: 191px;
        height:120px;
        background-image: url('facebookbg.png');
        background-repeat: no-repeat;
    }    
</style>
</head>
<body>
    <span class='img_facebook'></span>
</body>
</html>

Lớp CSS .img_facebook dùng có chứa thuộc tính background-image để xác định hình nền của đối tượng áp dụng lớp này, thuộc tính background-repeat dùng để chỉ định rằng nếu như kích thước khung hiển thị lớn hơn kích thước ảnh thì có lặp lại ảnh này hay không, trong trường hợp này chúng ta sẽ bỏ chức năng này đi. Trong thẻ <body> chúng ta có sử dụng thẻ <span> và thẻ này sử dụng lớp .img_facebook đã tạo ở trên. Nếu chạy trang web trong trình duyệt thì ta có kết quả là:

image

Bây giờ chúng ta sẽ tạo thêm một lớp CSS khác để hiển thị chỉ logo của facebook mà thôi. Vì tấm hình này có kích thước là 191 – 120 và trong đó phần logo có kích thước là 191 – 90 nên đơn giản các bạn chỉ cần chỉ định kích thước của khung hiển thị là 191 – 90, các phần bức ảnh dư thừa sẽ không được hiển thị. Phần style của trang web cũng sẽ được chỉnh sửa lại một chút, chúng ta sẽ không để kích thước trong class .img_facebook nữa mà thay vào đó các lớp CSS khác sẽ định nghĩa kích thước này, cụ thể như sau:

.img_facebook
{       
        display:block;
        background-image: url('facebookbg.png');
        background-repeat: no-repeat;
}
.logo
{
    width: 191px;
    height: 90px;
}

 

Thay thẻ span ban đầu ở trên bằng thẻ span mới có nội dung như sau

<span class='img_facebook logo'></span>
Kết quả:
image 

Khá đơn giản phải không nhỉ. Tuy nhiên, chúng ta bắt đầu gặp phải phần khó khăn hơn, đó là giả sử ta muốn hiển thị một ô vuông nhỏ chứa biểu tượng thứ tư trong danh sách các biểu tượng nhỏ của hình ảnh facebook (image ) thì ta phải làm sao?

Chúng ta hãy bổ sung thêm một lớp CSS mới có nội dung như sau:

.icon
{
    width:16px;
    height:18px;
    background-position: -55px -90px;
}

Giải thích: Dựa trên ảnh ban đầu mà ta xác định được rằng icon này có kích thước 16 – 18 và nằm lệch so với góc trên bên trái của hình ban đầu là 55px và 90px. Thuộc tính background-position cho phép ta dịch chuyển bức ảnh hiển thị so với tọa độ hiển thị bình thường của nó. Vì biểu tượng nhỏ cách bên trái là 55px nên bắt buộc ta phải dịch chuyển bức hình này qua trái 55px (thể hiện bằng dấu –), và cách bên trên 90px nên ta phải dịch chuyển bức hình này lên trên 90px.

image

Như vậy, thực tế là chúng ta vẫn đang sử dụng toàn bộ bức hình gốc, nhưng chỉ một phần của bức ảnh được hiển thị (hãy tưởng tượng bạn ngắm nhìn bức ảnh qua một cái cửa sổ nhỏ, bạn chỉ có thể thấy được một phần của bức ảnh đó vì các phần khác đã bị che khuất).

Tạo thẻ <span> mới có nội dung như sau trong thẻ <body>

<span class='img_facebook icon'></span>

 

Và Refresh lại trang web thì ta sẽ có kết quả

image

Như vậy, bạn đã có thể “cắt” một phần bức ảnh lớn để hiển thị ra ngoài. Người dùng khó có thể nhận biết rằng các hình ảnh trong trang web của bạn đều từ duy nhất 1 hình ảnh mà ra. Điều khó khăn khi sử dụng kỹ thuật này là bạn phải canh chính xác tọa độ của từng phần ảnh nhỏ trong bức ảnh lớn, vì vậy sẽ tốn nhiều thời gian phát triển hơn so với việc tách riêng từng ảnh như thông thường. Tuy nhiên, tốc độ trang web của bạn sẽ nhanh hơn vì bạn chỉ phải tải một hình ảnh duy nhất để sử dụng cho toàn bộ trang web.

Tác giả: xuanchien

Tran Xuan Chien. Japan Advanced Institute of Science and Technology - Japan. Senior Developer - NUS Technology.

11 thoughts on “Cắt ảnh với CSS”

  1. chà, cái này hao hao giống như spite trong lập trình game hả chiến.. chọn tọa độ của một phần ảnh trong hình để hiển thị sprite và các chuyển động :d.. vậy mình lập trình game kết hợp JS cà CSS được hem😀

  2. Sau khi đọc bài của bạn mình có một số thắc mắc nho nhỏ. Mình đã thử test và xin được bổ xung 1 chút vào bài của bạn.
    – Đăng ảnh bằng phương pháp này người dùng không sử dụng được thao tác ‘save image as’ (Khi nhấp chuột phải vào nó không xuất hiện). Khi ta dùng thao tác “Save page as” để lưu trang lại thì trong thư mục chứa cũng không xuất hiện ảnh.
    – Do đó mình còn một số băn khoăn: Ảnh này được truyền đi như thế nào? Cơ chế hoạt động của CSS ra sao? Thao tác cắt ảnh được xử lý trên server hay client – nếu trên client thì sao không có ảnh gốc? Ảnh gốc sẽ được truyền đi hay các ảnh nhỏ sẽ được truyền đi?

    1. 1. Hình ảnh lúc nào không phải được load cùng với trang web mà load cùng với file CSS. Do đó, bạn phải tìm đường dẫn nằm trong file CSS để lưu file ảnh đó về máy.
      2. Bởi vì chúng ta sử dụng đường dẫn ảnh lớn trong CSS nên nó sẽ được tải 1 lần duy nhất. Sau đó trình duyệt mới dựa trên CSS mà hiển thị từng phần tương ứng.

      1. Giờ thì mình đã hiểu hiểu rồi. Nếu mình viết đoạn ‘style’ kia thành một file riêng thì khi ‘Save page as’ nó sẽ lưu file .css và ảnh kèm theo. Thank you!

  3. cái này là kiểu cho hiển thị 1 phần của ảnh dựa theo sự kiện khi di chuột vào nó

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s