Chúng tôi có thể giải quyết vấn đề về hình ảnh nền của bảng, trong chrome, trong các bảng đa ô?

Question

Nó thường được hỏi - nhưng tôi chưa thấy câu trả lời hay (và tôi đã nhìn). Nếu bạn đặt hình nền trong CSS thành hàng trong bảng - hình ảnh sẽ tự lặp lại trong mọi ô. Nếu bạn đặt position: relative (cho hàng) và đặt background-image: none (đối với các ô), nó giải quyết được sự cố trên IE nhưng không giải quyết được trên chrome! Tôi không thể sử dụng định vị nền vì có nhiều cuộc gọi và kích thước của chúng thay đổi. (Và hình ảnh không symmetrical- Đó là một phai ra từ một phía Bất kỳ ai ??

Ví dụ về mã css:..

tr { height: 30px; position:relative;} 
tr.green { background: url('green_30.png') no-repeat left top; } 
tr.orange { background: url('oranger_30.png') no-repeat left top;} 
tr.red { background: url('red_30.png') no-repeat left top; } 
td { background-image: none; } 

HTML là cơ bản - Một bảng tế bào đa

Mục tiêu là để có các màu sắc khác nhau mờ dần thành từng hàng, nhưng nó có thể là bất kỳ hình ảnh nào không có hoa văn.

Answer 1

Ok, tôi đã dành thời gian đọc về điều này và không thể tìm thấy bản sửa lỗi dễ dàng cho tất cả các trình duyệt. thấy bạn đang sử dụng các hàng có chiều cao cố định, tôi đã phát triển giải pháp riêng của mình:Về cơ bản, thay vì đặt hình nền trên hàng, bạn đặt nó trên một div vị trí tuyệt đối trong ô đầu tiên của mỗi hàng (và mở rộng nó để điền vào toàn bộ hàng). Điều này là hơi hacky, nhưng có thể là cách đáng tin cậy duy nhất để đạt được những gì bạn muốn.

Answer 2

Thêm phao: từ trái sang hàng, cần sửa nó.

tr {float:left;} 

Answer 3

Tested trong Chrome 54 trên Windows 10:

tr { 
    background-attachment: fixed; 
} 

Mặc dù có vẻ như nó không phải không có lỗi - hình nền chỉ lặp đi lặp lại trong suốt viewport tại thời gian tải, có nghĩa là các tế bào xuất hiện khi bạn cuộn xuống không có nền.