mask-size հատկությունը

mask-size հատկությունը սահմանում է դիմակի պատկերի չափը: Կարելի է սահմանել կոնկրետ չափեր պիքսելներով/տոկոսներով կամ օգտագործել cover և contain բանալի բառերը:

Սինտաքս

cssընտրիչ {
  mask-size: auto | <length> | <percentage> | cover | contain;
}

Արժեքներ

Օրինակ . Cover չափ

Դիմակը մասշտաբավորվում է՝ ամբողջությամբ ծածկելու տարրը.

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

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

Результат:

Օրինակ . Contain չափ

Դիմակը մասշտաբավորվում է՝ ամբողջությամբ տեղավորվելու տարրի մեջ.

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;
}

Результат:

Օրինակ . Ֆիքսված չափ պիքսելներով

150×150 պիքսել չափով դիմակ.

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

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

Результат:

Օրինակ . Չափ տոկոսներով

Դիմակը զբաղեցնում է տարրի լայնության 80%-ը և բարձրության 60%-ը.

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

css#image {
  width: 500px;
  height: 281px;
  mask-image: url("heart.svg");
  mask-position: center;
  mask-size: 80% 60%;
  mask-repeat: no-repeat;
}

Результат:

Օրինակ . Տարբեր չափեր առանցքներով

Դիմակը 200px լայնությամբ և 100px բարձրությամբ.

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

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

Результат:

Տես նաև