mask-image CSS

Свойство mask-image устанавливает изображение, которое используется как слой маски для элемента.

Свойство **`mask-image`** устанавливает изображение, которое используется как слой маски для элемента.
Значение по умолчанию:

none

Значение по умолчанию:
`none`
Наследуется:
Нет
Анимируется:
Нет
Спецификации:
Спецификации:
* [CSS Masking Module Level 1](https://drafts.fxtf.org/css-masking-1/#the-mask-image)
Поддержка браузерами:

Can I Use css-masks? Data on support for the css-masks feature across the major browsers from caniuse.com.

Поддержка браузерами:
<p class="ciu_embed" data-feature="css-masks" data-periods="future_1,current,past_1,past_2"> <a href="http://caniuse.com/#feat=css-masks">Can I Use css-masks?</a> Data on support for the css-masks feature across the major browsers from caniuse.com. </p>

Синтаксис

/* Keyword value */
mask-image: none;

/* <mask-source> value */
mask-image: url(masks.svg#mask1);

/* <image> values */
mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);
mask-image: image(url(mask.png), skyblue);

/* Multiple values */
mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent);

/* Global values */
mask-image: inherit;
mask-image: initial;
mask-image: unset;

Синтаксис

/* Keyword value */ mask-image: none; /* <mask-source> value */ mask-image: url(masks.svg#mask1); /* <image> values */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* Multiple values */ mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* Global values */ mask-image: inherit; mask-image: initial; mask-image: unset;

Значения

  • none — это ключевое слово интерпретируется как прозрачный слой черного изображения.
  • <mask-source> — ссфлка <url> на <mask> или изображение.
  • <image> — изображение, используемое в качестве слоя маски.

Значения

* `none` -- это ключевое слово интерпретируется как прозрачный слой черного изображения. * `<mask-source>` -- ссфлка `<url>` на `<mask>` или изображение. * `<image>` -- изображение, используемое в качестве слоя маски.

Примеры

CSS

#masked {
  width: 100px;
  height: 100px;
  background-color: #8cffa0;
  -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
  mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg);
}

HTML

<div id="masked"></div>

Примеры

CSS #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } HTML <div id="masked"></div>

Содержание

  • Синтаксис
      /* Keyword value */ mask-image: none; /* <mask-source> value */ mask-image: url(masks.svg#mask1); /* <image> values */ mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent); mask-image: image(url(mask.png), skyblue); /* Multiple values */ mask-image: image(url(mask.png), skyblue), linear-gradient(rgba(0, 0, 0, 1.0), transparent); /* Global values */ mask-image: inherit; mask-image: initial; mask-image: unset;
  • Значения
    • Примеры
        CSS #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); } HTML <div id="masked"></div>

    В начало