Maskergrootte - CSS-trucs

Anonim

In CSS specificeert de eigenschap mask-size de grootte van een maskerlaagafbeelding. In veel opzichten werkt het net als het background-sizeonroerend goed.

.element ( mask-image: url(star.svg); mask-size: 200px 100px; )

Met maskering kunt u geselecteerde delen van een element weergeven en de rest verbergen. De grootte van het masker wordt bepaald door de mask-sizeeigenschap.

In de volgende demo kun je spelen met de grootte van de maskerlaagafbeelding:

Syntaxis

mask-size: = ( = | | auto )(1,2) | cover | contain
  • Oorspronkelijke waarde: auto
  • Van toepassing op: alle elementen. In SVG is het van toepassing op containerelementen met uitzondering van het element, alle grafische elementen en het element
  • Overgenomen: nee
  • Animatietype: herhaalbare lijst

Dat wil in feite zeggen dat de syntaxis een waarde voor de achtergrondgrootte ( ) accepteert die een of twee lengtes en / of percentages ( ) kan zijn, ingesteld op autoof een van de twee trefwoorden ( coveren contain).

  • Wanneer twee waarden worden gebruikt, specificeert de eerste waarde de breedte van de maskerafbeelding en specificeert de tweede waarde de hoogte .
  • Wanneer een waarde wordt gebruikt die geen inhoud of dekking is, definieert deze de breedte van het maskerbeeld en wordt aangenomen dat de hoogte dat is auto.

Waarden

/* Lengths */ mask-size: 200px; /* width is 200px and height is auto */ mask-size: 50% 100%; /* width is 50% and height is 100% */ 
 /* Keywords */ mask-size: contain; mask-size: cover; 
 /* Global values */ mask-size: auto; mask-size: intial; mask-size: inherit; mask-size: unset;

Waarde definities

  • ​pxemrem%
  • ​ mask-originStandaard is deze waarde border-box, wat betekent dat het randen, opvulling en inhoud van het vak bevat.
  • auto​
  • contain​ Voor afbeeldingen zoals verlopen die geen intrinsieke afmetingen hebben, wordt deze weergegeven op de grootte van het maskerpositioneringsgebied.
  • cover​ Voor afbeeldingen zoals verlopen die geen intrinsieke afmetingen hebben, wordt deze weergegeven op de grootte van het maskerpositioneringsgebied.
  • initial​auto
  • inherit​
  • unset​mask-size

Meerdere waarden gebruiken

Deze eigenschap kan een door komma's gescheiden lijst met waarden voor maskergroottes aannemen en elke waarde wordt toegepast op een corresponderende maskerlaagafbeelding die in de mask-imageeigenschap is gespecificeerd .

In het volgende voorbeeld specificeert de eerste waarde de grootte van de eerste afbeelding, de tweede waarde specificeert de grootte van de tweede afbeelding, enzovoort.

.element ( mask-image: url(image1.png.webp), url(image2.png.webp), url(image3.png.webp); mask-size: 100px 100%, auto, contain; )

De autowaarde

Als de waarde van de mask-sizeeigenschap als volgt is opgegeven auto:

.element ( mask-size: auto auto; /* or */ mask-size: auto; )

… Dan schaalt het maskerbeeld in de overeenkomstige richtingen om de aspectverhouding te behouden. Dat gezegd hebbende, kunnen we verschillende resultaten krijgen, afhankelijk van de intrinsieke afmetingen en proporties van de afbeelding.

Verhouding / dimensie Geen intrinsieke afmetingen Een intrinsieke dimensie Beide intrinsieke dimensies
Heeft aandeel Weergegeven alsof in plaats daarvan contain was opgegeven Weergegeven op de grootte bepaald door die ene dimensie en de verhouding Op dat formaat weergegeven
Geen aandeel Weergegeven op de grootte van het maskerpositioneringsgebied Weergegeven met behulp van de intrinsieke dimensie en de overeenkomstige dimensie van het maskerpositioneringsgebied Nvt

Als de waarde van mask-sizeis opgegeven met autoen een andere niet-automatische waarde, zoals de volgende:

.element ( mask-size: auto 200px; )

… vervolgens:

  • als de afbeelding een intrinsieke proportie heeft , wordt de auto-waarde berekend met behulp van de gespecificeerde dimensie en de intrinsieke proportie.
  • als de afbeelding geen intrinsieke proportie heeft , wordt de auto-waarde de corresponderende intrinsieke dimensie van de afbeelding als deze bestaat en, als dat niet het geval is, wordt auto de corresponderende dimensie van het maskerpositioneringsgebied.

Begrijpen coverencontain

In de volgende video wordt uitgelegd hoe de trefwoorden bevatten en omslag werken. Merk op dat de beginpositie van een maskerlaag zich in het midden van het positioneringsgebied bevindt:

Als het beeld geen intrinsieke aspectverhouding heeft, wordt het maskerbeeld weergegeven op de grootte van het maskerpositioneringsgebied als u dekking of bevat specificeert.

En wat is in hemelsnaam een ​​intrinsieke dimensie en intrinsieke proportie?

Intrinsieke afmetingen zijn de breedte en hoogte van een element en de intrinsieke verhouding is de verhouding ervan.

  • Een bitmap-afbeelding zoals een PNG-indeling heeft altijd intrinsieke afmetingen en een intrinsieke proportie.
  • Een vectorafbeelding, zoals een SVG-indeling, kan beide intrinsieke afmetingen hebben. Daarom heeft het ook een intrinsieke proportie. Het kan ook een of geen intrinsieke afmetingen hebben en, in beide gevallen, al dan niet een intrinsieke proportie.
  • Verlopen zijn als afbeeldingen zonder intrinsieke afmetingen of intrinsieke proporties.

Browser-ondersteuning

D.W.Z Rand Firefox Chrome Safari Opera
Nee 18+ 53+ Alle 4+ 70
Android Chrome Android Firefox Android-browser iOS Safari Opera Mini
85+ 79+ 4.4+ Alle Alle
Bron: caniuse

Demo

De volgende demo gebruikt een lengte voor de maskergrootte. Probeer de waarde te wijzigen in andere soorten waarden in de code en controleer het resultaat.

Meer informatie

  • CSS-maskeermodule niveau 1
  • Knippen en maskeren in CSS
  • Clipping vs. maskeren: wanneer elk te gebruiken
  • # 185: Spelen met CSS-maskers (video)