10/10/2018, 10:33

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

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 viết 12:47 ngày 10/10/2018

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 viết 12:45 ngày 10/10/2018

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 viết 12:39 ngày 10/10/2018

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 viết 12:44 ngày 10/10/2018

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

cuipap viết 12:38 ngày 10/10/2018

Được gửi bởi xcode

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 viết 12:43 ngày 10/10/2018

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 viết 12:43 ngày 10/10/2018

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

Code:

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

honnhienh viết 12:47 ngày 10/10/2018

Được gửi bởi thuyduongcd

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

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

vuongtq

0 chủ đề

0 bài viết

Tác giả nổi bật