Какая альтернатива CSS Filter для Firefox?

Question

Я использую 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>

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

Answer 1

Пожалуйста, проверьте Nihilogic Javascript Image Effect Library :

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

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

• они также основаны на JS
• есть лаборатория для экспериментов

Удачи

Answer 2

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

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

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

Answer 3

Фильтры SVG, применяемые к содержимому HTML .

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

Answer 4

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

---

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

Answer 5

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

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

Синтаксис

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

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

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

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

Answer 6

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

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

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

Это вряд ли будет реалистичным решением. Если вы не хотите постоянно изменять исходные изображения, лучший ответ будет иметь Rudi , для которого лучше всего использовать кросс-браузерные решения на стороне сервера для применения преобразований на лету (или кэширования для повышения производительности). 1009 *

Answer 7

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

Answer 8

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

Answer 9

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

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