В чем разница между "непрозрачностью" и "фильтром: непрозрачность" ()

Большинство из нас знают простое правило CSS opacity, но в последнее время я наткнулся на filter, который может иметь opacity(amount) как его ценность - между прочим. Но в чем же разница между этими двумя?

Ответы

Ответ 1

filter в CSS были несколько разных прогонов, а именно для FireFox и MSIE.

В MSIE 5.5 через 7, filter, также известный как Alpha Filter, фактически использует MSIE DX Filter (больше не поддерживается). Однако, чтобы быть более совместимым с CSS2.1, в IE8 MS представила -ms-filter для замены filter. Синтаксис отличается тем, что значение -ms-filter должно быть заключено в кавычки. В конце концов, IE9 привёл к этому методу устаревание, и с IE10 он больше не используется.

Еще одно интересное замечание: если вам нужна полная совместимость для более старого IE, то вы должны убедиться, что используете filter и -ms-filter должно быть очень специфичным. Например, в IE8 не работает режим совместимости с IE7:

element {
    filter: alpha(opacity=50);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

Забастовкa >

-ms-filter must > filter, чтобы получить больше от более старой совместимости IE. Так вот:

element {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

FireFox использовал filter, поскольку эксперимент пошатнулся. Я считаю, что первоначальная идея заключалась в том, чтобы издеваться над IE, использующим движок Direct X. Была даже версия браузера, как это было в большинстве браузеров за один раз. В конце концов, HTML5/CSS3 объявил использование пространства имен filter, и теперь у него есть новая цель.

Начиная с CSS3, filter теперь имеет совершенно новое значение! Доки Firefox остаются открытыми, как если бы они планировали расширять это, хотя я еще не видел его (однако они рушат JS, если ваш CSS сейчас не по себе!). Webkit (который, вероятно, станет стандартным при следующем обновлении CSS3), начал внедрять filter до тех пор, пока вы не сможете практически получить изображения "Photoshop" для ваш сайт!

Так как фильтр меняет так много, opacity будет предпочтительным способом использования, однако, как вы можете видеть, быть полностью совместимым с браузером, значит быть очень тщательным.

Различные параметры браузера:

  • -webkit-filter: filter (value);
  • -moz-filter: filter (value);
  • -o-filter: filter (value);
  • -ms-filter: "progid: DXCLASS.Object.Attr(значение)";

См. также: