Можем ли мы решить проблему с фоновым изображением строки строки в хром, в таблицах с несколькими ячейками?

Его часто спрашивают, но пока я не нашел хорошего ответа (и я посмотрел). Если вы установите фоновое изображение в CSS в строку таблицы - изображение будет повторяться в каждой ячейке. Если вы установите position: relative (для строки) и установите background-image: none (для ячеек), он решает проблему в IE, но не на хром! Я не могу использовать фоновое позиционирование, так как есть много вызовов и их размер меняется. (И картинка не симметрична - она исчезает с одной стороны. Кто-нибудь?

Пример для кода 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 является базовым - таблица с несколькими ячейками.

Цель состоит в том, чтобы разные цвета затухали в каждой строке, но это могло быть любое изображение без рисунка.

Ответ 1

Хорошо, я потратил много времени на чтение, и не смог найти легкое исправление для всех браузеров, но, как я вижу, вы используете фиксированные строки высоты, я разработал свое собственное решение: http://jsfiddle.net/DR8bM/

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

Ответ 2

Добавить float: слева к строке, которая должна его исправить.

tr {float:left;}

Ответ 3

Протестировано в Chrome 54 в Windows 10:

tr {
  background-attachment: fixed;
}

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