Tanken här är att föreställa sig tre lager staplade ovanpå varandra där det övre lagret används för att skära ut en form i det andra lagret för att avslöja det tredje lagret.
Om texten på det översta lagret i diagrammet ovan var den form vi skär ut ur det andra lagret, illustrerar följande bild begreppet knockout-text.
SVG-kodavsnitt
Här är ett utdrag som ställer in det nedre lagret ( .knockout) som knockout-texten kommer att avslöja, det mellanliggande lagret ( .knockout-text-bg) som vi skär ut ur och det övre lagret ( .knockout-text) som innehåller SVG-texten som fungerar som en mask att klippa ut det andra lagret.
Knock Out Text De koordinater är helt godtyckliga i detta exempel och kan justeras för att passa den faktiska storleken och placeringen av text som läggs till.
Observera att det fillandra lagret är svart och filldet översta lagret är vitt. Så fungerar masker: vitt är den perfekta kontrasten till svart och döljer de svarta delarna. Vi kan göra det övre lagret till en helt annan färg och det skulle inte helt dölja det svarta utan låta en del av det glida igenom.
CSS Styling
Resten är CSS-styling. Till exempel kan vi lägga till en bakgrundsgradient i det nedre lagret och utforma teckensnittsstorleken för att få mer av en dramatisk effekt.
.knockout ( /* Ensure the bottom layer is full screen */ height: 100vh; width: 100%; /* Add a colorful texture and cutom font-styling */ background-image: linear-gradient(to left, #ff4e50 , #f9d423); text-transform: uppercase; ) /* Knockout text font sizing for each line */ text:nth-child(2) ( font-size: 5em; ) text:nth-child(3) ( font-size: 5.1em; ) text:nth-child(4) ( font-size: 15em; )Se Pen SVG Knock Out Text av Geoff Graham (@geoffgraham) på CodePen.