Какова альтернатива CSS-фильтру для Firefox?

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

Вопрос

Я использую CSS-фильтры для изменения изображений "на лету" в браузере.Они отлично работают в Internet Explorer, но не поддерживаются в Firefox.

Кто-нибудь знает, что такое эквивалент CSS-фильтра для них для Firefox?Предпочтительным был бы ответ, который работал бы в разных браузерах (Safari, WebKit, Firefox и т.д.).

<style type="text/css">
    .CSSClassName {filter:Invert;}
    .CSSClassName {filter:Xray;}
    .CSSClassName {filter:Gray;}
    .CSSClassName {filter:FlipV;}
</style>

Обновить:Я знаю, что Filter - это специфическая функция IE.Есть ли какой-либо эквивалент для любого из них, который поддерживается Firefox?

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

Решение

Пожалуйста, проверьте Библиотека графических эффектов Nihilogic Javascript:

  • довольно хорошо поддерживает IE и Fx
  • имеет множество эффектов

Вы можете найти много других эффектов в Проекты на Виргинских островах:

Удачи вам

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

Не могли бы вы привести нам конкретный пример того, что именно вы пытаетесь сделать?Вы, вероятно, получили бы меньше "Твой брауэр sux" ответы и многое другое "Как насчет того, чтобы попробовать другой подход?" единицы.

Обычно CSS используется для управления внешним видом HTML-контента, а не для добавления эффектов или редактирования изображений хитроумными способами.То, что вы пытаетесь сделать, может быть возможно с помощью javascript, но сценарий, ориентированный на поведение, по-прежнему, вероятно, не очень хорошо подходит для настройки, которую вы хотите выполнить (хотя что-то вроде это это забавное и очень неэффективное приключение в CSS / JS tomfoolery).

Я не могу представить себе сценарий, когда ты бы потребность клиент для выполнения настройки изображения в режиме реального времени.Вы могли бы модифицировать изображения на стороне сервера и просто ссылаться на эти измененные версии с помощью вашего CSS или, возможно, Javascript, в зависимости от того, что именно вы делаете. ImageMagick - Магия изображений это отличный маленький инструмент командной строки для всех графических эффектов, которые вам когда-либо понадобятся, и он довольно прост в использовании сам по себе или на выбранном вами серверном языке.Или, если вы используете PHP, я полагаю Библиотека GD в PHP довольно популярен.

В других браузерах аналогов нет.Самое близкое, что вы могли бы получить, - это использовать графическую библиотеку, такую как Canvas, и манипулировать изображениями в ней, но вам пришлось бы писать манипуляции самостоятельно, и для них потребовался бы JavaScript.

filter это функция только для IE - она недоступна ни в одном другом браузере.

SVG-фильтры, применяемые к HTML-контенту.

Работает только в Firefox 3.1 и выше, хотя я думаю, что Safari движется в том же направлении.

Насколько я знаю, ничего подобного.Filter был доступен только в IE, и я не думаю, что какой-либо другой браузер обладал подобной функциональностью.

Какой конкретный вариант использования вам нужен?

Боюсь, что вам в значительной степени не повезло с большинством кроссбраузерных приложений filter-введите функциональность.Один только CSS не позволит вам выполнять большинство из этих действий.Например, нет способа инвертировать изображение в кроссбраузерном режиме, просто используя CSS.Вам нужно будет иметь две разные копии изображения (одну перевернутую), или вы могли бы попробовать использовать Javascript или, возможно, сделать это совершенно другим способом, но простого решения исключительно в CSS не существует.

Существуют фильтры, такие как размытие по Гауссу и др. в SVG, которые изначально поддерживаются большинством браузеров, за исключением IE.

Чисто мысленный эксперимент здесь, вы могли бы обернуть свои изображения в SVG-объект "на лету" с помощью javascript и попытаться применить к ним фильтры.

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

Вряд ли это будет реалистичным решением.Если вы не хотите постоянно изменять исходные изображения, Руди имеет лучший ответ: использование серверных инструментов для применения преобразований "на лету" (или кэширования для повышения производительности) будет лучшим кроссбраузерным решением.

Это очень-очень старый вопрос, но css обновился, теперь он поддерживает фильтры.Подробнее об этом читайте по адресу

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

Синтаксис

С помощью функции используйте следующее:

filter: <filter-function> [<filter-function>]* | none

Для ссылки на SVG-элемент используйте следующее:

filter: url(svg-url#element-id)

На самом деле нет, и, надеюсь, этого никогда не будет.Это не стандартная веб-функция CSS по той причине, что вы используете CSS для форматирования веб-страницы, а не самого браузера.В тот день, когда другие веб-дизайнеры и разработчики решат, что им следует оформить мой браузер так, как они хотят, и сделают это, я перестану посещать их страницы (и я говорю это как веб-специалист по интерфейсу).

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