Как обрезать градиент к тексту поверх родительского элемента?
Я хочу прикрепить градиент родительского элемента к дочерним элементам, но это не совсем работает. либо градиент отображается полностью (не только покрывает текст), либо другой мой обычный фон — это фон, который он использует для обрезки (полностью белый). я в основном хочу, чтобы один и тот же градиент применялся к обоим h1, чтобы узоры оставались есть ли обходной путь?
<div className = "flex flex-col w-full mesh-gradient-background bg-clip-text z-10">
<h1 className = "animate-fade-up bg-clip-text text-transparent text-center font-display text-2xl font-bold tracking-[-0.03em] opacity-0 drop-shadow-sm [text-wrap:balance] md:text-5xl md:leading-[5rem] z-[10]"
style = {{ animationDelay: "0.15s", animationFillMode: "forwards" }}>
Long Text 1
</h1>
<h1 className = "transition-all duration-1000 animate-fade-up text-center font-display text-4xl font-bold tracking-[+0.03em] text-transparent opacity-0 drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem] bg-size-200 bg-pos-0 hover:bg-pos-100 w-min cursor-default"
style = {{ animationDelay: "0.15s", animationFillMode: "forwards" }}>
Long Text 2
</h1>
</div>
Я также попытался сделать div абсолютным, но проблема осталась.
Ответы 2
Чтобы добиться эффекта обрезки градиентного фона, примененного к родительскому элементу, чтобы он закрывал только текст его дочерних элементов, вы можете использовать комбинацию свойств CSS. В частности, установка родительского элемента на градиентный фон и обеспечение прозрачности дочерних элементов позволит градиенту отображаться только через текст.
Вот возможный обходной путь с использованием CSS:
Убедитесь, что родительский элемент имеет градиентный фон. Используйте bg-clip-text и text-transparent для дочерних элементов. Установите для свойства фонового клипа родительского элемента значение text, чтобы текст отображал градиент.
<div class = "flex flex-col w-full relative">
<div class = "mesh-gradient-background absolute inset-0 z-0"></div>
<h1 class = "animate-fade-up text-transparent bg-clip-text text-center font-display text-2xl font-bold tracking-[-0.03em] opacity-0 drop-shadow-sm [text-wrap:balance] md:text-5xl md:leading-[5rem] z-[10]"
style = "animation-delay: 0.15s; animation-fill-mode: forwards;">
Long Text 1
</h1>
<h1 class = "transition-all duration-1000 animate-fade-up text-transparent bg-clip-text text-center font-display text-4xl font-bold tracking-[+0.03em] opacity-0 drop-shadow-sm [text-wrap:balance] md:text-7xl md:leading-[5rem] z-[10]"
style = "animation-delay: 0.15s; animation-fill-mode: forwards;">
Long Text 2
</h1>
Убедитесь, что у вас есть следующий CSS для градиентного фона:
.mesh-gradient-background {
background: linear-gradient(to right, #ff7e5f, #feb47b); /* Example gradient */
-webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
mask-image: linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
z-index: -1; /* Send the gradient behind the text */}
Это связано с потенциальной ошибкой в Chrome, Edge и последней версии Safari. См. масштаб преобразования, не работающий с фоновым вырезом и градиентами , или отчет об ошибке в Chromium.
Тот же градиент применяется отдельно:
Если вы хотите, чтобы к обоим h1 был применен один и тот же градиент, вместо этого вы можете просто установить фон h1. (Я изменил drop-shadow, чтобы сделать его видимым, но вы можете изменить его обратно на все, что захотите.) Однако, если вы имели в виду общий градиентный фон, см. вторую половину ответа.
В любом случае вам следует переместить анимацию непрозрачности на задний план div.
.mesh-gradient-background {
background: linear-gradient(to right, purple, orange);
}
.animate-fade-up {
animation: fade-up 1s;
}
@keyframes fade-up {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<script src = "https://cdn.tailwindcss.com"></script>
<div class = "grid w-full z-10 opacity-0 animate-fade-up"
style = "animation-delay:0.15s; animation-fill-mode:forwards">
<h1 class = "bg-clip-text text-transparent text-center font-display text-2xl font-bold
w-max justify-self-center tracking-[-0.03em] [text-wrap:balance] md:text-5xl
md:leading-[5rem] mesh-gradient-background z-[10] bg-clip-text
drop-shadow-[0px_8px_8px_pink]">
Long Text 1
</h1>
<h1 class = "transition-all duration-1000 text-center font-display text-4xl font-bold
tracking-[+0.03em] text-transparent [text-wrap:balance]
md:text-7xl md:leading-[5rem] bg-size-200 bg-pos-0 hover:bg-pos-100 w-min
cursor-default mesh-gradient-background bg-clip-text drop-shadow-[0px_8px_8px_pink]">
Long Text 2
</h1>
</div>Общий градиентный фон:
После некоторого тестирования с isolation:isolate мне показалось, что background-clip:text не отражает тексты дочерних элементов, которые формируют новый контекст стека. Следовательно, любые свойства h1, вызывающие формирование нового контекста стекирования, включая opacity, z-index и drop-shadow, приведут к игнорированию текста.
Ибо opacity в вашем случае легко решить. Его можно применить к самому фону. А поскольку z-index не нужен, просто удалите его. Однако для этого необходимо удалить drop-shadow.
.mesh-gradient-background {
background: linear-gradient(to right, purple, orange);
}
.animate-fade-up {
animation: fade-up 1s;
}
@keyframes fade-up {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<script src = "https://cdn.tailwindcss.com"></script>
<div class = "flex flex-col w-full mesh-gradient-background bg-clip-text z-10 opacity-0 animate-fade-up" style = "animation-delay:0.15s; animation-fill-mode:forwards">
<h1 class = "text-transparent text-center font-display text-2xl font-bold
tracking-[-0.03em] [text-wrap:balance] md:text-5xl md:leading-[5rem]">
Long Text 1
</h1>
<h1 class = "transition-all duration-1000 text-center font-display text-4xl font-bold
tracking-[+0.03em] text-transparent [text-wrap:balance] md:text-7xl
md:leading-[5rem] bg-size-200 bg-pos-0 hover:bg-pos-100 w-min cursor-default">
Long Text 2
</h1>
</div>Чтобы включить drop-shadow в фоновый клип с использованием общего линейного фона, одним из возможных решений является использование background-attachment:fixed. Однако положение и размер фона будут зависеть от области просмотра, что может быть не идеальным.
.mesh-gradient-background {
background: linear-gradient(to right, purple, orange);
background-attachment: fixed;
background-size: 100% 100%;
}
.animate-fade-up {
animation: fade-up 1s;
}
@keyframes fade-up {
from {
opacity: 0;
}
to {
opacity: 1;
}
}<script src = "https://cdn.tailwindcss.com"></script>
<div class = "flex flex-col w-full z-10 opacity-0 animate-fade-up" style = "animation-delay:0.15s; animation-fill-mode:forwards">
<h1 class = "bg-clip-text text-transparent text-center font-display text-2xl font-bold
tracking-[-0.03em] [text-wrap:balance] md:text-5xl md:leading-[5rem]
mesh-gradient-background drop-shadow-[0px_8px_8px_pink]">
Long Text 1
</h1>
<h1 class = "transition-all bg-clip-text duration-1000 text-center font-display text-4xl font-bold
tracking-[+0.03em] text-transparent [text-wrap:balance] md:text-7xl
md:leading-[5rem] bg-size-200 bg-pos-0 hover:bg-pos-100 w-min cursor-default
mesh-gradient-background drop-shadow-[0px_8px_8px_pink]">
Long Text 2
</h1>
</div>
Спасибо! последний фрагмент кода действительно работал.