Hỏi cách cắt CSS gộp tất cả ảnh về 1 file

[vuongtq]

Mình thấy nhiều website họ cắt css gộp tất cả ảnh về 1 file. Xin các bác chỉ giáo

Thanks

[cuipap]

Bác hỏi không rõ ràng, em đoán ý bác nói về kĩ thuật CSS SPRITE phải ko ?

Em định giải thích 1 tí nhưng có lẽ bác đọc link bên dưới thì tỏ tường luôn rồi ạ

http://www.alistapart.com/articles/sprites

http://css-tricks.com/css-sprites/

[dokhacluan]

thì bạn muốn làm vậy , khi viết css cậu để file .css của cậu trong 1 file , rồi dùng file đó định nghĩa cho toàn bộ css website của cậu , bao gồm định nghĩa đường dận file ảnh thông qua background-image

[trinhdiep]

css khi đặt background-image có kèm background-position là vị trí tọa độ góc tây bắc từ đó ảnh được hiển thị. cách này thường dùng cho các control.

[xcode]

Nói chung khá là phức tạp so với cách thông thường

[cuipap]

Nói chung khá là phức tạp so với cách thông thường

Thực ra không quá phức tạp đâu bạn, mà có lợi lắm: gộp nhiều image thành 1 nên khi làm hover chẳng hạn hiệu ứng sẽ không bị lỗi load chậm ở lần đầu tiên, giảm được số http request, page load nhanh hơn tí...

[webvina]

nếu bạn bỏ qua IE6 thì css sprite là lựa chọn rất hay. Vửa giảm được số request cho website vửa giảm dung lượng hình ảnh cho site.

Tham khảo thêm

http://www.smashingmagazine.com/2009...and-tutorials/
http://line25.com/tutorials/how-to-c...-image-sprites

[thuyduongcd]

Ví dụ bạn có 1 button với 2 trạng thái normal và hover, mỗi trạng thái có 1 background tương ứng. Bình thường bạn sẽ lưu vào 2 file normal.gif (16x16px) và hover.gif (16x16px).
Bây giờ dùng PS tạo 1 file picture.gif (32x16px) sau đó copy 2 ảnh kia paste vào, phần bên trái để ảnh normal, bên phải để ảnh hover, giống như chơi trò xếp hình vậy đó.
Tiếp theo là set CSS

a{
background: #FFFFFF url("picture.gif") left no-repeat;
}
a:hover{
background: #FFFFFF url("picture.gif") -16px no-repeat;
}

[honnhienh]

Bây giờ dùng PS tạo 1 file picture.gif (32x16px) sau đó copy 2 ảnh kia paste vào, phần bên trái để ảnh normal, bên phải để ảnh hover, giống như chơi trò xếp hình vậy đó.

mấy thứ này bữa thấy mấy tụi nó làm mà chằng biết để làm gì. này mới hiểu he he