1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографика typographymaskheading

Image Masked Text

Крупный заголовок с фоновым изображением или видео через маску текста.

Image Masked Text

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

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

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

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/ImageMaskedText.astro:

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>

Краткая информация

Категория
Типографика
Имя файла
ImageMaskedText.astro
Зависимости
Нет — чистый Astro + CSS
Теги
typographymaskheading