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

StackOverflow https://stackoverflow.com/questions/4792090

Вопрос

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

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

2) Internet Explorer, поддерживающий rgba через странную штуку -ms-filter.

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

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

Спасибо.

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

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

Это было полезно?

Решение

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

.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.

Это должно устранить необходимость использования «изображений png base64 со схемой URI данных».

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

Создавайте клиентские PNG-файлы с помощью JavaScript. Классная идея, правда:

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

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

Другие советы

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top