Прозрачный однородный фон

Есть несколько способов, которыми можно сделать однородный прозрачный фон на сайте.
Рассмотрим на примере:
- нужно получить темно-иссиня-серый фон #3b4044 с прозрачностью слоя 0.75.

1. RGBA(59, 64, 68 .75)

Это первое, что приходит на ум. Отличный вариант для быстрого задания цвета с прозрачностью. Даже разложение 16-ричного определения цвета на три 10-ричных канала не представляет сложности. Но есть одна проблема: не работает в ie8 =(

2. Opacity(.75)

Второе, что приходит на ум. Сделать фон одноцветным и добавить прозрачность. Работает даже в ie5 с помощью дополнительных фильтров:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; /* IE 8 */
filter: alpha(opacity=75); /* IE 5-7 */

Уже лучше, но у этого свойства есть один серьезный недостаток: opacity добавляет прозрачность блоку, а соответственно и всему внутреннему контенту, так что нам это тоже не подойдет.

Да еще и сглаживание шрифтов нарушается в ie ((

3. background: url(image)

Старый, добрый, проверенный вариант. Делаем картинку размер 1px на 1px нужного цвета и прозрачности, сохраняем как png и вставляем фоном. Все отлично работает, разве что мы имеем еще один маленький запрос на сервер за картинкой.

Это лечится следующим способом:

4. background: url('data:image/png;base64,...')

Перевод изображения в формат base64, таким образом картинка кодируется и вставляется непосредственно в css.

Вот несколько сайтов для конвертации image to base64:

• http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
• http://ole.michelsen.dk/tools/base64.html
• http://www.greywyvern.com/code/php/binary2base64

В итогде получаем:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA9JREFUeNpisHZ03Q8QYAAC/QGBtfPbbQAAAABJRU5ErkJggg==

Size increased from 109 to 148 (36%)