Какая альтернатива CSS-фильтру для Firefox?
Я использую фильтры 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?
Ответы 9
В других браузерах аналогов нет. Самое близкое, что вы могли бы сделать, - это использовать графическую библиотеку, такую как Canvas, и манипулировать изображениями в ней, но вам придется писать манипуляции самостоятельно, а для них потребуется JavaScript.
filter - это функция только для IE - она недоступна ни в одном другом браузере.
Да, я знаю, что фильтр - это особенность IE. Вот почему я спрашиваю, есть ли какой-нибудь эквивалент, работающий в Firefox.
Ничего из того, что я знаю. Фильтр был единственным средством IE, и я не думаю, что какой-либо другой браузер имел аналогичную функциональность.
Какой конкретный вариант использования вам нужен?
Боюсь, что вам не повезло с большей частью кроссбраузерной функциональности типа filter. Один только CSS не позволит вам сделать большинство из этих вещей. Например, невозможно инвертировать изображение в кроссбраузере с помощью CSS. У вас должны быть две разные копии изображения (одна перевернутая), или вы можете попробовать использовать Javascript, или, возможно, сделать это совершенно другим способом, но нет простого решения только на CSS.
Не совсем, и, надеюсь, никогда не будет. Это не стандартная веб-функция CSS по той причине, что вы используете CSS для форматирования веб-страницы, а не самого браузера. В тот день, когда другие веб-дизайнеры и разработчики подумают, что они должны стилизовать мой браузер так, как они хотят, и затем сделают это, я перестану посещать их страницы (и я говорю это как фронтенд-веб-парень).
фильтры не стилизуют браузер.
О да, здесь я ушел по касательной, поскольку стили браузера (например, цвет полосы прокрутки и т. д.) Также, насколько мне известно, специфичны для IE и аналогичным образом реализованы для фильтров. Прошу прощения и виню в этом 2 часа сна: <
Не могли бы вы привести конкретный пример того, что именно вы пытаетесь сделать? Вероятно, вы получите меньше ответов "Ваш браузер sux" и больше ответов "Как насчет того, чтобы попробовать этот другой подход?".
Обычно CSS используется для управления внешним видом содержимого HTML, а не для добавления эффектов или редактирования изображений с умом. То, что вы пытаетесь сделать, возможно, возможно с использованием javascript, но сценарий, ориентированный на поведение, по-прежнему, вероятно, не очень хорошо подходит для той настройки, которую вы хотите сделать (хотя что-то вроде это - забавное и очень неэффективное приключение в CSS. / JS дурачество).
Я не могу представить себе сценарий, когда вы бы необходимость клиент выполнял настройку изображения в реальном времени. Вы можете изменять изображения на стороне сервера и просто ссылаться на эти измененные версии с помощью своего CSS или, возможно, Javascript, в зависимости от того, что именно вы делаете. ImageMagick - отличный небольшой инструмент командной строки для всех эффектов изображения, которые вам когда-либо понадобятся, и его довольно просто использовать отдельно или на выбранном вами серверном языке. Или, если вы используете PHP, я считаю, что Библиотека PHP GD довольно популярен.
Пожалуйста, проверьте Библиотека эффектов изображения Nihilogic Javascript:
- неплохо поддерживает IE и Fx
- имеет много эффектов
Вы можете найти много других эффектов в CVI проекты:
- они также основаны на JS
- есть Лаборатория для экспериментов
Удачи
Существуют фильтры, такие как Gaussian Blur и другие в SVG, которые изначально поддерживаются большинством браузеров, кроме IE.
Чистый мысленный эксперимент здесь: вы можете на лету обернуть свои изображения в объект SVG с помощью javascript и попытаться применить к ним фильтры.
Я сомневаюсь, что это сработает для фоновых изображений, хотя, возможно, с большим количеством умного позиционирования это может сработать.
Вряд ли это реальное решение. Если вы не хотите постоянно изменять исходные изображения, Руди имеет лучший ответ, использование инструментов на стороне сервера для применения преобразований на лету (или кэширования для производительности) будет лучшим кросс-браузерным решением.
Фильтры SVG, применяемые к содержимому HTML.
Работает только в Firefox 3.1 и выше, хотя я думаю, что Safari движется в том же направлении.
Это очень-очень старый вопрос, но css обновлен и теперь поддерживает фильтры. Подробнее об этом читайте на
https://developer.mozilla.org/en-US/docs/Web/CSS/filter
Синтаксис
С функцией используйте следующее:
filter: <filter-function> [<filter-function>]* | none
Для ссылки на элемент SVG используйте следующее:
filter: url(svg-url#element-id)
Как насчет использования SVG в Firefox?