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

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

12 голосов
/ 25 января 2011

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

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

2) Internet Explorer, поддерживающий rgba через bizarre '-ms-filter 'thing.

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

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

Спасибо.

Редактировать:

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

Ответы [ 3 ]

35 голосов
/ 25 января 2011

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

.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 png со« схемой URI данных »».

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

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

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

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

0 голосов
/ 13 июля 2012

Вы можете использовать прозрачность вплоть до Safari, предшествующего Webkit, IE5, Firefox .9 ... Так давно никто не использует его. http://css -tricks.com / CSS-прозрачность-настройки-для-всех-broswers / 

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

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

0 голосов
/ 25 января 2011

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

...