Кросс-браузер rgba прозрачный фон при сохранении содержимого (текст и изображения) непрозрачный

Я хочу получить фон rgba, работающий со всеми браузерами. Я сделал некоторые поиски и выяснил, что, как правило, существуют три типа браузеров:

1) Браузеры, поддерживающие rgba.

2) Internet Explorer, который поддерживает rgba через причудливую '-ms-filter' вещь.

3) Браузеры, которые не поддерживают rgba, но я мог бы использовать png изображения base64 с "схемой URI данных". (Даже если браузер не поддерживает схему URI, в соответствии с this это все еще можно сделать.)

У меня нет проблем с поддержкой rgba браузеров, и я могу заставить его работать с IE, но проблема в том, что я понятия не имею, как создавать клиентские base64 png-изображения для схемы URI. Я действительно не хочу предвосхищать png файлы, потому что мои значения rgba не являются постоянными. Я мог бы работать с динамическим генератором png с библиотекой php gd, но мне бы очень хотелось сделать все это на стороне клиента. Поэтому я хотел бы знать, есть ли хороший способ для создания полупрозрачных изображений PNG с помощью java- script. После этого я мог бы просто base64 закодировать их и использовать их с URI-схемой?

Спасибо.

Edit:

Я хочу иметь полупрозрачный div-фон, имея полностью видимый контент.

ОТВЕТЫ

Ответ 1

См. это сообщение в блоге для метода кросс-браузера:

.alpha60 {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

Поддержка веб-браузера

Поддержка RGBa доступна в: Firefox 3+ Safari 2+ Opera 10

Фильтры в Internet Explorer доступный с Internet Explorer 5.5.

Это означает, что это будет работать практически каждый!

См. здесь для простого способа генерации цветов для фильтров IE.

Выполнение этого должно исключить необходимость использования "базовых изображений base64 с" схемой URI данных ".

Если вы действительно хотите сгенерировать изображения на стороне клиента .png (я не вижу его здесь):

Создайте файлы PNG на стороне клиента, используя JavaScript. Отличная идея:

Это снова была одна из тех ночей где я взломал, как на наркотики, без конец в поле зрения. Конечно, 5 лет назад вы любил меня с таким проектом, но во время HTML5 с холстом элемент вам трудно произвести впечатление. Так считать его доказательством создания клиента боковые изображения без холста, SVG или рендеринг стороны сервера и AJAX обработка.

Но как это возможно? Ну, я реализовал клиентский JavaScript библиотеки, например libpng, которая создает PNG поток данных. Получившийся двоичный данные могут быть добавлены к данным URI-схема, использующая кодировку Base64.

Ответ 2

Я думаю, что браузеры, которые не поддерживают rgba, также не поддерживают base64. Однако вы можете просто использовать полупрозрачное фоновое изображение 2x2 px (не 1x1, чтобы избежать странной ошибки с IE).

Ответ 3

Вы можете использовать прозрачность вплоть до предварительного Webkit Safari, IE5, Firefox.9... Так что старый никто не использует его. http://css-tricks.com/css-transparency-settings-for-all-broswers/

.transparent {
zoom: 1;
filter: alpha(opacity=50);
opacity: 0.5;
}

Конечно, вы можете установить эти свойства css на отдельные элементы через ваши любимые библиотеки Javascript или вручную. Так как ваш резерв, установите свой RBG, а затем добавьте соответствующую прозрачность.