Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Результати вашого пошуку

    filter

    Переклад не закінчено. Будь ласка, допоможіть перекласти цю статтю з англійської.

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.

    Опис

    Властивість filter дає можливість застосувати до елементів такі графічні ефекти, як розмиття (blurring), збільшення чіткості (sharpening), зміна кольорів (color shifting). Зазвичай фільтри викорустовуються для налаштування рендерингу зображень, фонів (backgrounds) та границь (borders).

    У CSS стандарт включені декілька функцій, які досягають визначених ефектів. Ви можете також посилатися на SVG-фільтр за допомогою посилання(URL) на SVG filter element.

    Примітка: Більш старі версії браузера Windows Internet Explorer (4.0 - 9.0) підтримували нестандартний "filter", який з того часу є застарілим.

    Initial valuenone
    Applies toall elements; In SVG, it applies to container elements excluding the defs element and all graphics elements
    Inheritedno
    Mediavisual
    Computed valueas specified
    Animatableyes
    Canonical orderthe unique non-ambiguous order defined by the formal grammar

    Syntax

    filter: url("filters.svg#filter-id");
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Apply multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

    З функцією використовуйте наступне:

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

    Для посилання на SVG <filter> елемент використовуйте наступне:

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

    Формальний синтаксис

    none | <filter-function-list>
    where 
    <filter-function-list> = [ <filter-function> | <url> ]+
    where 
    <filter-function> = <blur()> | <brightness()> | <contrast()> | <drop-shadow()> | <grayscale()> | <hue-rotate()> | <invert()> | <opacity()> | <sepia()> | <saturate()>
    where 
    <blur()> = blur( <length> )
    <brightness()> = brightness( [ <number> | <percentage> ] )
    <contrast()> = contrast( [ <number> | <percentage> ] )
    <drop-shadow()> = drop-shadow( <length>{2,3} <color>? )
    <grayscale()> = grayscale( [ <number> | <percentage> ] )
    <hue-rotate()> = hue-rotate( <angle> )
    <invert()> = invert( [ <number> | <percentage> ] )
    <opacity()> = opacity( [ <number> | <percentage> ] )
    <sepia()> = sepia( [ <number> | <percentage> ] )
    <saturate()> = saturate( [ <number> | <percentage> ] )
    where 
    <color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>
    where 
    <rgb()> = rgb( <rgb-component>#{3} )
    <rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
    <hsl()> = hsl( <hue>, <percentage>, <percentage> )
    <hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
    <named-color> = <ident>
    <deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText
    where 
    <rgb-component> = <integer> | <percentage>
    <alpha-value> = <number>
    <hue> = <number>

    Приклади

    Приклади використання визначених функцій подаються нижче. Дивіться кожну функцію для конкретного прикладу.

    .mydiv { filter: grayscale(50%) }

/* зробить сірим на 50% та розмиє на 10px */
img {
  filter: grayscale(0.5) blur(10px);
}

    Приклади використання URL функції з SVG ресурсом наведені нижче.

    .target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }

    Функції

    Для того, щоб використовувати CSS властивість filter, необхідно вказати значення (value) для однієї з наступних функцій. Якщо значення не є валідним, функція повертає "none". За винятком зазначених випадків, функції, які приймають значення, виражені у відсотках (наприклад, 34%), також приймають і ті значення, що виражені десятковим дробом (наприклад, 0.34).

    url()

    Функція url() приймає місцезнаходження XML-файлу, який визначає SVG-фільтр і має містити якір(anchor) до конкретного фільтр-елемента.

    filter: url(resources.svg#c1)

    blur()

    Розмиття. Застосовує гаусове (Gaussian) розмиття до вхідного зображення. Значення радіусу (‘radius’) встановлює значення стандартного відхилення до гауссової (Gaussian) функції, або на скільки пікселі екрану мають зливатися один з одним. Тому більше значення забеспечить більше розмиття. Якщо жоден параметр не вказаний, використовується значення "0". Параметр визначений, як CSS довжина, але не приймає значень у відсотках.

    filter: blur(5px)

    <svg style="position: absolute; top: -99999px" xmlns="https://www.w3.org/2000/svg">
  <filter id="svgBlur" x="-5%" y="-5%" width="110%" height="110%">
    <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
  </filter>
</svg>

    brightness()

    Яскравість. Застосовує лінійний множник(мультиплікатор) до вхідного зображення, щоб зробити його більш або менш яскравим. Значення "0%" створить абсолютно чорне зображення. Значення "100%" залишить зображення без змін. Інші значення є лінійними мультиплікаторами, що застосовуються до ефекту. Значення, більші за "100%", дозволяються і дають більш яскраві результати. Якщо параметр ‘amount’ не вказаний, використовується значення "1".

    filter: brightness(0.5)
    <svg style="position: absolute; top: -99999px" xmlns="https://www.w3.org/2000/svg">
 <filter id="brightness">
    <feComponentTransfer>
        <feFuncR type="linear" slope="[amount]"/>
        <feFuncG type="linear" slope="[amount]"/>
        <feFuncB type="linear" slope="[amount]"/>
    </feComponentTransfer>
  </filter>
</svg>

    contrast()

    Контрастність. Налаштовує контраст зображення. Значення "0%" створить абсолютно сіре зображення. Значення "100%" залишить зображення без змін. Значення, більші за "100%", дозволяються і дають більш контрастні результати. Якщо параметр ‘amount’ не вказаний, використовується значення "1". 

    filter: contrast(200%)

    <svg style="position: absolute; top: -99999px" xmlns="https://www.w3.org/2000/svg">
  <filter id="contrast">
    <feComponentTransfer>
      <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncG type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <feFuncB type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </feComponentTransfer>
  </filter>
</svg>

    drop-shadow()

    Відкидання тіні. Застосовує відкидання тіні до вхідного зображення. Це фактично розмита, зміщена версія альфа-маски вхідного зображення,  намальована певним кольором та створена під зображенням. Функція приймає параметр типу <shadow> (визначена у CSS3 Backgrounds), за винятком того, що ключове слово ‘inset’ не дозволене. Дана функція дуже схода на більш укорінену властивість box-shadow; різниця у тому, що у випадку з фільтрами деякі браузери забезпечують апаратне прискорення для більш високої продуктивності. Нижче наведені параметри параметра <shadow>.

    <offset-x> <offset-y> (required)
    Ці два обов'язкові <length> значення вказують зміщення тіні. <offset-x> визначає горизонтальну відстань. Від’ємні значення розміщують тінь лівіше елемента. <offset-y> визначає вертикальну відстань. Від’ємні значення розміщують тінь вище елемента. Дивіться <length> можливі одиниці. Якщо обидва значення "0", тінь розміщується за елементом (і може створювати ефект ромиття, якщо вказані <blur-radius> та/або <spread-radius>).
    <blur-radius> (optional)
    Це необов'язкове третє <length> значення. Чим більше значення, тим більше розмиття, тим більшою і світлішою стає тінь. Від’ємні значення не дозволені. Якщо значення не визначене, воно буде "0" (межі тіні будуть чіткими).
    <spread-radius> (optional)
    Це необов'язкове четверте <length> значення. Додатні значення розширять тінь і зроблять її більшою, а від'ємні - зменшать. Якщо значення не визначено, воно буде "0" (тінь буде мати какий розмір, як зображення). 
    Примітка: Webkit та, можливо, інші браузери, не підтримують цей четвертий параметр; він не виконається, якщо його додати.
    <color> (optional)
    Дивіться <color> значення, щоб дізнатися можливі ключові слова та умовні позначення. Якщо значення не вказано, колір залежить від браузера. У Gecko (Firefox), Presto (Opera) та Trident (Internet Explorer), значення color властивості використовується. З іншого боку, тінь WebKit є прозорою, тому вона є марою, даремною, якщо значення <color> не вказане.
    filter: drop-shadow(16px 16px 10px black)
    <svg style="position: absolute; top: -999999px" xmlns="https://www.w3.org/2000/svg">
 <filter id="drop-shadow">
    <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/>
    <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feFlood flood-color="[color]"/>
    <feComposite in2="offsetblur" operator="in"/>
    <feMerge>
      <feMergeNode/>
      <feMergeNode in="SourceGraphic"/>
    </feMerge>
  </filter>
</svg>

    grayscale()

    Конвертує вхідне зображення у відтінках сірого. Значення ‘amount’ визначає пропорцію конвертації. Значення "100%" повністю конвертує зображення у відтінки сірого. Значення "0%" залишає зобращення без змін. Значення між "0%" та "100%" є лінійними множниками(мультиплікаторами) ефекта. Якщо парамент ‘amount’  не вказаний, використовується значення "0".

    filter: grayscale(100%)

    hue-rotate()

    Зміна відтінків. Застосовує зміну відтінків до вхідного зображення. Значення ‘angle’ визначає кількість градусів на колірному крузі (color circle), які будуть застосовані до вхідного зображення. Значення (0deg) залишає зображення без змін. Якщо параметр  ‘angle’  відсутній, використовується значення "0deg". Хоча і не існує максимального значення, ефект значень, більших за "360deg", буде обертатися навколо.

    filter: hue-rotate(90deg)
    <svg style="position: absolute; top: -999999px" xmlns="https://www.w3.org/2000/svg">
  <filter id="svgHueRotate" >
    <feColorMatrix type="hueRotate" values="[angle]" />
  <filter />
</svg>

    invert()

    Інвертування. Інвертує зразки (samples) у вхідному зображенні. Значення ‘amount’ визначає пропорцію конвертації. Значення "100%" інвертує зображення повністю. Значення "0%" залишає зображення без змін. Значення між "0%" та "100%" є лінійними множниками (мультиплікаторами) ефекта. Якщо параметр ‘amount’  відсутній, використовується значення "0".

    filter: invert(100%)

    opacity()

    Непрозорість. Застосовує прозорість до вхідного зображення. Значення ‘amount’ визначає пропорцію конвертації. Зі значенням "0%" зображення стає повністю прозорим. Значення "100%" залишає зображення без змін. Значення між "0%" та "100%" є лінійними множниками (мультиплікаторами) ефекта. Це еквівалентно множенню зразків (samples) зображення на  ‘amount’. Якщо параметр ‘amount’  відсутній, використовується значення "1". Ця функція схожа на більш укорінену властивість opacity; ріниця полягає у тому,  що у випадку з фільтрами деякі браузери забезпечують апаратне прискорення для більш високої продуктивності.

    filter: opacity(50%)

    saturate()

    Насичення. Робить зображення більш насиченими. Значення ‘amount’ визначає пропорцію конвертації. Зі значенням "0%" зображення стає повністю ненасиченим. Значення "100%" залишає зображення без змін. Інші значення є лінійними множниками (мультиплікаторами) ефекта. Значення, більші за "100%" дозволяються і забеспечують більш насиченими результатами. Якщо параметр ‘amount’ відсутній, використовується значення "1".

    filter: saturate(200%)

    sepia()

    Сепія. Конвертує зображення до сепії. Значення ‘amount’ визначає пропорцію конвертації. Значення "100%" конвертує зображення повністю. Значення "0%" залишає зображення без змін. Значення між "0%" та "100%" є лінійними множниками (мультиплікаторами) ефекта. Якщо параметр ‘amount’ відсутній, використовується значення "0".

    filter: sepia(100%)

    Combining functions

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

    filter: contrast(175%) brightness(103%)

    Specifications

    Specification Status Comment
    Filter Effects Module Level 1
    The definition of 'filter' in that specification.    		 Working Draft Initial definition

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
    Basic support 18.0-webkit[1] 35 (35)[2] No support[3] 15.0-webkit 6.0-webkit
    On SVG Elements No support[4] 35 (35) No support No support No support
    Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
    Basic support 4.4-webkit 35 (35)[2] No support 22.0 (Yes)-webkit

    6.0 (Yes)-webkit
    On SVG Elements No support[4] 35 (35) No support No support No support

    [1] У Chrome 18 to 19, функція saturate() приймає тільки цілі десяткові числа та відсоткові значання. Цей баг виправлений у Chrome 20 та наступних.

    [2] До Firefox 34, Gecko виконував тільки url() форму властивості filter; так як формування ланцюжка (chaining) тоді не було реалізовано, було дозволено тільки одне url() (або коли layout.css.filters.enabled pref було встановлене як false).

    Функціональні значення filter контролюються layout.css.filters.enabled pref і був доступним, але заборонений за замовчуванням у Firefox 34.

    [3] Internet Explorer з 4.0 по 9.0 виконував нестандартну властивіст filter. Синтаксис сильно відрізняється і не був тут задокументований.

    [4] У даний момент Blink не виконує дану властивість(feature). Дивіться bug 109224.

    See also

    Мітки документа й учасники

     Зробили внесок у цю сторінку: Sebastianz, AlinaKuzmenko
     Востаннє оновлена: Sebastianz,