Typography typographymaskheading

Image Masked Text

Text that uses an image as its background fill.

Image Masked Text

Usage

Copy the full block below to use this component with its imports.

astro 
---
import { ImageMaskedText } from 'astro-component-kit';
---

<BackgroundClipMask>Content</BackgroundClipMask>
--- import { ImageMaskedText } from 'astro-component-kit'; --- <BackgroundClipMask>Content</BackgroundClipMask>

Manual Installation

If you are not using the npm package, create a new file src/components/lib/ImageMaskedText.astro and paste the following code:

astro 
---
---
<h1 class="mask-txt"><slot /></h1>
<style>
  .mask-txt { font-size: 8rem; font-weight: 900; background: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1000&q=80'); background-size: cover; background-position: center; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; line-height: 1; text-align: center; }
  @media (max-width: 768px) { .mask-txt { font-size: 4rem; } }
</style>
--- --- <h1 class="mask-txt"><slot /></h1> <style> .mask-txt { font-size: 8rem; font-weight: 900; background: url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=1000&q=80'); background-size: cover; background-position: center; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; line-height: 1; text-align: center; } @media (max-width: 768px) { .mask-txt { font-size: 4rem; } } </style>

Quick Info

Category
Typography
Filename
ImageMaskedText.astro
Dependencies
None — pure Astro + CSS
Tags
typographymaskheading