Mask հատկությունը

mask հատկությունը դիմակավորման բոլոր հատկությունների համառոտագրություն է և թույլ է տալիս սահմանել. դիմակ-նկար, դրա դիրքը, չափը, խառնման ռեժիմը և այլ պարամետրեր:

Հանդիսանում է համառոտագիր հատկություն հետևյալ հատկությունների համար. mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Շարահյուսություն

cssընտրիչ {
  mask: [mask-image] [mask-position] / [mask-size]
        [mask-repeat] [mask-origin] [mask-clip]
        [mask-mode] [mask-composite];
}

Արժեքներ

Նկարների պատրաստում

Ենթադրենք ունենք բնության նկար, որը մենք պատրաստվում ենք կտրել, և SVG նկարներ սրտի և սլաքի, որոնց միջոցով մենք կկտրենք.

html<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

Результат:

Օրինակ . Դիմակ-նկար

Եկեք դիմակ-սրտիկ դնենք մեր նկարի վրա.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url("heart.svg") center/300px no-repeat;
}

Результат:

Օրինակ . Դիմակի դիրքը

Դիմակ-սրտիկ վերևի ձախ անկյունում.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left top/150px no-repeat;
}

Результат:

Օրինակ . Դիմակի դիրքը

Դիմակ-սրտիկ ներքևի աջ անկյունում.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") right bottom/150px no-repeat;
}

Результат:

Օրինակ . Դիմակի դիրքը

Դիմակ-սրտիկ կենտրոնում ձախից.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left center/150px no-repeat;
}

Результат:

Օրինակ . Դիմակի դիրքը

Դիմակ-սրտիկ կենտրոնում.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/150px no-repeat;
}

Результат:

Օրինակ . Դիմակի դիրքը

Դիմակ-սրտիկ 100px ձախից և 200px վերևից.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") 100px 200px /150px no-repeat;
}

Результат:

Օրինակ . Դիմակի չափը cover

cover արժեքը մասշտաբավորում է դիմակը, որպեսզի այն ամբողջությամբ ծածկի տարրը, պահպանելով համամասնությունները. Կարող է կտրել դիմակի եզրերը, եթե համամասնությունները չեն համընկնում.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/cover;
}

Результат:

Օրինակ . Դիմակի չափը contain

contain արժեքը մասշտաբավորում է դիմակը, որպեսզի այն ամբողջությամբ տեղավորվի տարրի մեջ, պահպանելով համամասնությունները. Կարող է թողնել դատարկ տարածքներ.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/contain no-repeat;
}

Результат:

Օրինակ . Դիմակի չափը

Ֆիքսված չափը սահմանում է դիմակի ճշգրիտ չափերը. Օրինակ՝ ստեղծենք 50px չափի դիմակ.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") center/50px no-repeat;
}

Результат:

Օրինակ . Կրկնում no-repeat

no-repeat արժեքը անջատում է դիմակի կրկնումը. Դիմակը ցուցադրվում է միայն մեկ անգամ նշված դիրքում.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") top left / 150px no-repeat;
}

Результат:

Օրինակ . Կրկնում repeat-x

repeat-x արժեքը կրկնում է դիմակը միայն հորիզոնական առանցքի վրա.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: url("heart.svg") left center / 50px repeat-x;
}

Результат:

Օրինակ . Կոմպոզիցիա add

add արժեքը գումարում է մի քանի դիմակներ (արդյունքը բոլոր դիմակների միավորումն է).

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 200px 30px / 150px no-repeat;
  mask-composite: add;
}

Результат:

Օրինակ . Կոմպոզիցիա intersect

intersect արժեքը ցույց է տալիս միայն դիմակների հատման տարածքը.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 50px 30px / 150px no-repeat;
  mask-composite: intersect;
}

Результат:

Օրինակ . Կոմպոզիցիա exclude

exclude արժեքը ցույց է տալիս դիմակների այն տարածքները, որոնք չեն հատվում.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 150px no-repeat,
    url("arrow.svg") 50px 30px / 150px no-repeat;
  mask-composite: exclude;
}

Результат:

Օրինակ . Կոմպոզիցիա subtract

subtract արժեքը հանում է երկրորդ դիմակը առաջինից. Օրինակի համար ստեղծենք մեկ սրտիկ և դրանից հանենք սլաքը.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask: 
    url("heart.svg") 100px 50px / 250px no-repeat,
    url("arrow.svg") 170px 80px / 120px no-repeat;
    
    
  mask-composite: subtract;
}

Результат:

Օրինակ . Ընդլայնված գրառում mask

Mask հատկությունը, գրված առանձին բաղադրիչներով.

html<img id="image" src="image.jpg">

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-origin: content-box;
  mask-clip: content-box;
  mask-mode: alpha;
  mask-composite: add;
}

Результат:

Օրինակ . SVG նկարի համար

SVG տարրի օգտագործումը որպես դիմակ նկարի համար.

html<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>

css#image {
  width: 500px;
  height: 281px;
  background: red;
  mask: url(#mask);
}

Результат:

Օրինակ . SVG գրադիենտի համար

SVG տարրի օգտագործումը որպես դիմակ գրադիենտի համար.

html<div id="elem"></div>
<svg width="0" height="0">
  <mask id="star-mask">
    <path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
  </mask>
</svg>

css#elem {
  width: 500px;
  height: 300px;
  background: linear-gradient(45deg, red, blue);
  mask: url(#star-mask);
}

Результат:

Տես նաև