CSS Sprites Lặp đi lặp lại hình ảnh

Question

Tôi đã tự hỏi nếu có bất kỳ cách nào để sử dụng chỉ một hình ảnh để lặp lại và không lặp lại hình ảnh bằng cách sử dụng sprites css. Vì vậy, trong trường hợp này tôi muốn kết hợp tất cả các hình ảnh trên một trang bất kể chiều rộng và chiều cao là gì và nếu chúng sẽ được sử dụng làm hình ảnh lặp lại hoặc không lặp lại. Tôi biết tiêu chuẩn là tạo 1 hình ảnh bằng cách sử dụng tất cả hình ảnh không lặp lại và hình ảnh khác sử dụng tất cả hình ảnh lặp lại. Nhưng tôi chỉ muốn biết nếu tôi chỉ có thể sử dụng 1 hình ảnh cho tất cả mọi thứ.

Cảm ơn.

Answer 1

Câu trả lời ngắn gọn là "không".

Giải thích là hình ảnh lặp lại được hiển thị toàn bộ theo bất kỳ hướng nào mà chúng lặp lại. Vì vậy, một nền được đặt thành repeat-x sẽ hiển thị tất cả nội dung hình ảnh theo hướng ngang. Đây là lý do tại sao bạn không thể lặp lại theo cả hai hướng đồng thời bằng sprites.

Answer 2

Tôi biết tiêu chuẩn là tạo ra 1 hình ảnh sử dụng tất cả các không lặp lại hình ảnh và hình ảnh khác sử dụng tất cả các hình ảnh lặp đi lặp lại.

Tôi nghĩ bạn nhầm. Không thể chọn lọc một đoạn của một hình ảnh. Bạn chỉ có thể quét toàn bộ hình ảnh. Do đó, tất cả hình ảnh lặp lại phải nằm trong tệp hình ảnh của riêng chúng.

Answer 3

@Ryan Kinal là đúng khi nói trong answer rằng hình ảnh sprite không thể được sử dụng để lặp lại hình ảnh nền (theo cả hai hướng).

Vẫn còn một cách để làm cho trình duyệt chéo chỉ với một hoặc hai tệp (không phải hình ảnh), nhưng nó không đơn giản và phải phức tạp để sửa đổi (mặc dù sprites cũng phức tạp để sửa đổi, nhưng tại ít nhất là hình ảnh!).

• data: base64 encoding cho các trình duyệt hiện đại và IE8 +
• MHTML cho IE7 và dưới đây (xem ý kiến ​​cho IE7 trên Vista), tái phát hoặc dịch bởi Stoyan Stefanov

Như đã trình bày trong bài viết PHPIED, nội tuyến hình ảnh được lặp đi lặp lại hai lần nhưng với sự giúp đỡ của 3 ý kiến ​​có điều kiện, bạn có thể nhắm mục tiêu IE7 trở xuống với tệp MHTML, IE8 trở lên với dữ liệu: tệp cơ sở 64 và IE với cùng một tệp dữ liệu.

Bạn kết thúc với 5 file khác nhau trên máy chủ của bạn và 4 tải bởi bất kỳ trình duyệt đưa ra:

• một hình ảnh với no-repeat sprites -ing
• một hình ảnh với repeat-x sprites -ing
• một hình ảnh với repeat-y -ing sprites
• một tệp cho MHTML (phải được phân phát cho IE7 trở xuống) hình nền
• một tệp cho cùng một lần lặp lại b hình ảnh ackground nhưng dữ liệu được mã hóa cho IE8 + và các trình duyệt IE

Hình ảnh lặp lại lớn không nên được mã hóa dưới dạng tệp có thể tăng nhiều, thiết kế của bạn có thể thay đổi.

Answer 4

Rất tiếc, bạn không thể buộc cả hai loại hình ảnh hoạt động trên cùng một sprite. Thông thường, hình ảnh lặp lại là một phần nhỏ của hình ảnh lớn hơn (gradient) có thể được lặp lại để tiết kiệm thời gian và kích thước tải. Bạn có thể lặp lại hình ảnh theo chiều ngang, chiều dọc và cả hai.
repeat-x, repeat-y hoặc chỉ repeat cho cả hai. Đối với hình ảnh không lặp lại trên sprite bạn cần phải chỉ ra các tọa độ cuộn như scroll 60px -20px (60px là tọa độ trái và -20px là tọa độ trên cùng).