Самый быстрый способ сделать сплит-бары в HTML - CSS - JQuery

Question

В настоящее время я использую ul li для создания следующих баров

Но они очень медленно работают в Google Chrome. Поэтому я должен использовать другой метод, кроме ул ли

Как я могу это сделать? они динамичны и меняются в зависимости от статов монстров

спасибо.

Answer 1

Вы можете сделать каждую полосу сплошным цветом div с прозрачностью.Затем просто наложите div на верхнюю часть фоновой сетки, корректируя ширину по мере необходимости.

Answer 2

Вместо того, чтобы иметь дело с прозрачностью, как предложил Джейк, вы можете просто вложить два div с другим фоном для вышеупомянутого div.

Прикрепленная JS Fiddle для вашего удобства

Answer 3

Расширение предложения Джейка Физеля:

Make each FULL BAR a single graph and only show background-position 
partial as needed.
As a matter of fact, you should be very familiar with sprites and, 
in this case, there is no better use for them.