Trên trang web, tôi chia tỷ lệ hình ảnh của mình thành 50% với CSS để làm cho chúng trông sắc nét trên màn hình võng mạc nhưng không hoạt động với hình ảnh lát gạch, dường như không có cách nào để chia tỷ lệ hình ảnh nền do đó nó sẽ được sắc nét và không tăng gấp đôi kích thước trên màn hình võng mạc. Xin lỗi nếu câu hỏi này là khó hiểu.Làm thế nào để bạn tạo một nền lát gạch/lặp lại css sắc nét trên màn hình võng mạc?
Đặt background-size: 150px 150px; để có hình nền 300x300 dường như thực hiện thủ thuật. Lưu ý rằng background-size: 50%; sẽ không làm những gì bạn có thể mong đợi, vì nó đặt chiều rộng và chiều cao thành 50% vùng chứa chính.
Tôi gặp sự cố này và tôi đã áp dụng kích thước nền và nó hoạt động. Nó là một lỗi? –
@ChimKan: Không, đó là vì cách mà màn hình Retina xử lý kích thước pixel. Điều này là để làm cho các trang web không được thiết kế cho màn hình PPI cao có thể đọc được. Ví dụ: văn bản 9px trông giống như văn bản 4,5px trên màn hình thông thường, chỉ sắc nét hơn. – Kaivosukeltaja
Tôi chưa từng làm việc với màn hình Retina, nhưng tôi sẽ tưởng tượng sẽ tốt hơn nếu tạo hình nền thay thế với độ phân giải cao hơn cho chúng.
Một hình ảnh thay thế không hữu ích, hình ảnh này chỉ có kích thước 2x và trông mờ. – rizzle
Bạn làm cho nó có kích thước mà bạn cần trong Photoshop. Bạn không quy mô nó ở tất cả. Đó là điểm tạo ra một hình ảnh độc đáo ngay từ đầu. Bằng cách đó bạn có thể giữ tỷ lệ này 100%. – RyanJMcGowan
Ryan, iPhone tự mở rộng quy mô. Xem bài viết này: http://weedygarden.net/2010/10/retina-display-and-css-background-images/ – Kaivosukeltaja
thay vì chia tỷ lệ hình ảnh trên mỗi css, bạn đã thử sử dụng hình ảnh có kích thước và chất lượng đúng chưa? –
Nó không phải là về các tập tin bản thân, võng mạc màn hình quy mô hình ảnh 2x vì vậy nếu bạn đang hiển thị chúng ở 50% sau đó có vẻ tốt khác khôn ngoan nó trông mờ. – rizzle