Я не думаю что на 4х дивах вообще что то кроме затемнения можно реализовать )).

Помоему чуток не так.
контейнер с фоном, оверлей который затемнит фон, и квадрат, который содержит в себе картинку. 1)Позиционируем квадратик, 2)позиционируем картинку, 3) делаем квадратик видимым, 4) затемняем фон.

Конечно больше фич, можно масштабирывать картинку в квадрате к примеру.

В основном меня напрягает в твоём квадрате при затемнении, необходимость оперировать двумя картинками вместо одной, в плане расходов ресурсов мягко говоря не идеально. Возможно этого никто и не ощутит на практике, но с академической точки зрения, проблема имеет место быть.

Картинка то по сути одна, на такие случаи должно быть всё оптимизировано.)

Меня радует в ff такая фича:

<div id="id" style="float:left;border:1px solid #000;width:400px;height:100px;background: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif) 100% 100% no-repeat;">
выдели меня
</div>
<div style="float:left;border:1px solid #000;width:400px;height:100px;background:-moz-element(#id);"></div>

Я задавался вопросами относительно кеширования браузером элементов при рендеринге, понятно что браузеру накладно рендерить то что неизменялось. Но до эксперементов руки так и недошли.

думаю можно двигать много дивов на 1 пиксель
для первого эксперемента в них видна картинка целиком(без масштабирования),
для второго эксперемента в квадратиках большая картинка +она немного масштабированная и видно только её часть.

Если содержимое дива берётся из кэша то за один отрезок времени в обоих случаях пройденное расстояние будет примерно одинаковое.

дивы недолжны уходить за экран, значит им придётся бегать слева направо и справо на лево, минут по 10 допустим.
интересно сравнить также с пустыми дивами.

возможно сенсаций и небудет, но пока непопробуем наверняка не узнаем)