mask-image касиети
mask-image касиети элемент үчүн маска катары колдонулуучу сүрөттү коюуга мүмкүндүк берет. Маска элементтин кайсы бөлүктөрү көрүнүп, кайсылары жашырыла турканын аныктайт. Маска катары SVG, PNG сүрөттөрү же градиенттер колдонсо болот.
Синтаксис
селектор {
mask-image: none | <image> | <url>;
}
Маанилер
| Маани | Сүрөттөмө |
|---|---|
none |
Маскалоону өчүрөт (демейки маани). |
url() |
Маска-сүрөткө жол (SVG, PNG). |
linear-gradient() |
Маска катары сызыктуу градиент. |
radial-gradient() |
Маска катары радиалдык градиент. |
Мисал . Маска катары SVG колдонуу
Сүрөткө маска катары жүрөкчөнүн SVG-сүрөтүн жапшалы:
<img id="image" src="image.jpg">
#image {
width: 500px;
height: 281px;
mask-image: url("heart.svg");
mask-position: center;
mask-size: 300px;
mask-repeat: no-repeat;
}
:
Мисал . Маска катары градиент колдонуу
Элемент үчүн маска катары сызыктуу градиентти колдонолу:
<div id="elem"></div>
#elem {
width: 500px;
height: 300px;
background: linear-gradient(45deg, red, blue);
mask-image: linear-gradient(to right, transparent, black);
}
:
Мисал . Маска катары SVG-элемент колдонуу
SVG-элементинин жардамы менен маска түзүп, аны сүрөткө колдонолу:
<img id="image" src="image.jpg">
<svg width="0" height="0">
<mask id="mask">
<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
</mask>
</svg>
#image {
width: 500px;
height: 281px;
mask-image: url(#mask);
mask-position: center;
mask-size: contain;
mask-repeat: no-repeat;
}
:
Ошондой эле караңыз
-
mask-positionкасиети,
элементке салыштырмалуу масканын ордун аныктайт -
mask-sizeкасиети,
масканын өлчөмүн аныктайт -
mask-repeatкасиети,
масканын кайталанышын аныктайт -
mask-modeкасиети,
масканын фон менен кандай аракеттешкенин аныктайт -
maskкасиети,
бардык маскалоо касиеттери үчүн кыскартылган түр