mletov

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

UPD
Исходя из скриншота:
Сделайте png, только инвертированными. Фон иконки совпадает с фоном сайта, а контур изображения прозрачный. И меняйте цвет фона дива, в котором находится иконка.

Десктоп:
- Chrome
- Firefox
- IE10+ обязательно, более ранние версии - по ситуации, в зависимости от посещаемости и целевой аудитории
- Opera (современная, а не та, которая Presto), Safari, Vivaldi, Яндекс.Браузер и прочий WebKit - тоже по ситуации. В 99% случаев все будет как в Chrome

Ну и мобильные особняком идут

Насколько много картинок и как часто они должны меняться?
Если картинок мало и меняются редко, то проще захардкодить типа

switch ($imageNum)
{
      case 1:
            $buttonClass = "buttonWhite";
     break;

     case 2:
            $buttonClass = "buttonBlack";
     break;
    ...
}

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

Технически, на мой взгляд, проблем нет.
Но тут еще вопрос, что по этому поводу думают поисковики. Они же во многом цепляются за семантику и привыкли, что img для картинок, href для ссылок, button для кнопок и т д, хотя никто не мешает img заменять background'ом, ссылки оформлять кнопками, кнопки ссылками и т д.

Если заменить img на background, то, например, не факт, что изображения с сайта попадут в Яндекс.Картинки. Хотя, может, вы этого не хотите, тогда оно и к лучшему.

По идее, об этом не у вас голова должна болеть, а у веб-дизайнера. Пусть нарисует 3-4 макета, как таблица будет выглядеть в различных диапазонах ширины экрана. За вами только техническая реализация его задумки.

Поставьте правильные вопросы:

1) Для кого создать? Для себя можно и в чистом Html, для стороннего заказчика лучше с CMS, чтобы он мог сам редактировать.

2) Будет ли количество страниц расти или эти 2-3 это потолок?

3) Планируете внедрять на сайт хотя бы минимальную интерактивность? Например, формы обратной связи.

"Разлазятся" - это 5!
А посути вопроса: cымитировать таблицу через display: table и display:table-cell
Но если адаптив, то, конечно, не вариант

Как вариант, верстать на таблицах и с распорками из прозрачного gif, как делали в начале 2000-х

Открыть каждый из 25 файлов, Crl+F->Replace, работы от силы на час

Кликните Хромовским инспектором/Мозилловским фаербагом там, где она выводится, посмотрите, какие классы/id на ней висят и примените к ним правила css

Уж не дизайнеры полиграфии, которые внезапно решили попробовать свои силы в веб, сие рисовали?

А по сути вопроса: разве что костылями, например, прикинуть padding-left в заголовке при "традиционном" центрировании и применить к ячейкам с содержимым. Естественно, если заголовок переименуют, то придется и padding другой ставить.

Так может просто сделать ширину каждого li 33.3% ?

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

.container:hover div::after

А вообще надо разметку видеть