Это часто спрашивают – но я еще не видел хороший ответ (и я смотрел). При установке фонового изображения в 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 является основным - много таблица ячейки.
Цель состоит в том, чтобы иметь различные цвета, исчезают в каждую строку, но это могло быть любое изображение нешаблона.
Хорошо, я потратил целую вечность, читая об этом, и не смог найти простого решения для всех браузеров, но, как я вижу, вы используете строки с фиксированной высотой, я разработал свой собственный обходной путь: http://jsfiddle.net/DR8bM/
По сути, вместо того, чтобы помещать фоновое изображение в строку, вы помещаете его в блок div с абсолютным позиционированием в первой ячейке каждой строки (и расширяете чтобы заполнить всю строку). Это немного взломано, но может быть единственным надежным способом добиться желаемого.