10/10/2018, 13:23
Mấy bác pro CSS vào giúp?
Là mình có thấy một số diễn đàn. Dùng cách background-image thì nó có nhiều icon dc gộp chung thành 1 hình ảnh. Mà khi sử dụng thì có thể lấy từng phần ra.
Vậy cho mình hỏi nó gọi là gì? Và dùng thế nào?
Lấy ví dụ như hình ảnh trong game java. Các cử động, đạn được ghép thành 1 hình nhưng khi sử dụng thì lấy dc từng phần.
Vậy cho mình hỏi nó gọi là gì? Và dùng thế nào?
Lấy ví dụ như hình ảnh trong game java. Các cử động, đạn được ghép thành 1 hình nhưng khi sử dụng thì lấy dc từng phần.
Bài liên quan
Lợi ích của việc tạo sprite là để giảm lượng request vào máy chủ serve static. Đồng thời giúp cho các hỉnh ảnh được tải 1 lần.
Có vài nguyên tắc khi làm cái này. Bạn cứ làm thử rồi từ từ nhận ra phải làm thế nào cho hợp lý.
Have fun!
- Bạn có kiến thức về CSS Background chưa? (nếu có thì tiếp tục, chưa có cần tìm hiểu)
- Bạn có kiến thức về phần mềm xử lý ảnh chưa (vd: Photoshop)? (nếu có tiếp tục, chưa có thể tìm hiểu hoặc nhờ người trợ giúp)
B2:
- Cắt những hình ảnh, icon,... từ PSD layout ra riêng từng file
- Sau đó ghép lại chung vào 1 file khác trong suốt (có thể save for web dưới dạng .PNG vd: sprite.png)
B3:
- Thường với những thành phần sử dụng kỹ thuật này đều phải đặt kích thước Box CSS cụ thể (width, height bằng kích thước từng ảnh nhỏ của sprite.png nhé) nhớ những thứ là inline phải để thành display: block đó nha.
- Tất cả những thành phần cần 1 phần hình ảnh đều có background image url chung là file sprite.png.
- Cuối cùng với mỗi hình ảnh nhỏ bên trong cần tỉ mỉ đo tọa độ top, left của nó xem là bao nhiêu tính từ gốc 0,0 của sprite.png. Trong CSS từng thành phần cần sài đó cần đặt background postion là thành x = -top, y = -left
Bạn nên bắt tay vào làm, kỹ thuật này nếu giải thích với người làm design đồ họa sẽ hiểu rất nhanh, con đừng hiểu máy móc phức tạp theo tư duy lập trình mà mệt đấy. Thử soi trang như http://dantri.com.vn/ xem