Как реализовать арочную тень для изображения в React с помощью Tailwind CSS?
Я пытаюсь создать эффект тени в форме арки для изображения в моем проекте React, используя Tailwind CSS. Моя цель — покрыть верхнюю часть изображения полупрозрачной тенью в форме арки, как показано в прикрепленном примере изображения.
Вот что я пробовал до сих пор:
.arch-shadow {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50%;
background: rgba(0, 0, 0, 0.5);
border-radius: 100% 100% 0 0;
z-index: 1;
}
<div ref = {viewRef} className = "w-full relative flex justify-center">
<CardImgFrame
imageUrl = {imageUrl}
alt = {title}
frameClassName = "aspect-4/5 h-[516px] relative z-10"
imageClassName = "object-fill"
priority = {true}
/>
<div className = "arch-shadow"></div>
{description && (
<p className = "absolute text-white bottom-3 font-semibold z-20">
{title}
</p>
)}
</div>
Я ожидаю, что верхняя часть изображения будет покрыта полупрозрачной тенью в форме арки, так что будет выглядеть так, будто изображение имеет наложение тени с формой арки сверху.
Текущая реализация либо покрывает все изображение, либо не создает желаемого эффекта арки в верхней части изображения.
возможно, подойдет что-то вроде маски на полусеровато-прозрачном слое, я не понимаю, как адаптировать нижнюю часть с помощью радиального градиента
Как вы хотите, чтобы это выглядело, если окно просмотра является альбомным или полукруг будет показывать очень мало основного изображения?
спасибо, братья, я использовал радиальный градиент, но теперь у меня растворитель. Спасибо за ваши ответы!
Ответы 2
кажется, что вы на правильном пути, но CSS могут потребоваться некоторые корректировки, чтобы тень правильно закрывала верхнюю часть изображения. Пожалуйста, попробуйте вот так, если вы можете найти правильный путь.
.arch-shadow {
position: absolute;
top: 0; /* Positioning it at the top */
left: 0;
right: 0;
height: 50%; /* You can adjust this height */
background: rgba(0, 0, 0, 0.5);
border-radius: 50%; /* This will create a circular top arc */
transform: translateY(-50%); /* Move it upwards so that it overlaps the image */
z-index: 1; /* Make sure it's above the image but below the title */
}
Вот как вы можете интегрировать все в свой компонент React:
const ImageWithArchShadow = ({ imageUrl, title, description }) => {
return (
<div className = "relative flex justify-center w-full">
<CardImgFrame
imageUrl = {imageUrl}
alt = {title}
frameClassName = "aspect-4/5 h-[516px] relative z-10 overflow-visible" // Ensure overflow is visible
imageClassName = "object-fill"
priority = {true}
/>
<div className = "arch-shadow"></div>
{description && (
<p className = "absolute text-white bottom-3 font-semibold z-20">
{title}
</p>
)}
</div>
);
};
Большое спасибо за ответ. Этот код не подходит. Я пробовал использовать полигон с обтравочным контуром, но это непросто, я устал, потому что не могу делать это в течение 5 часов..
Вы можете поместить арку в качестве фона для псевдоэлемента after в содержащем элементе. А затем сделайте его полукругом, используя радиальный градиент и траекторию обрезки.
Вот простой пример:
<style>
* {
margin: 0;
}
div {
width: 100vw;
height: 100vh;
background-image: url(https://picsum.photos/id/1015/768/1024);
background-size: cover;
position: relative;
}
div::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
aspect-ratio: 1;
opacity: 0.3;
background-image: radial-gradient(circle at 50% 50%, transparent 0 70%, gray 70% 100%);
clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
</style>
<div></div>Однако учтите, что вам придется продумать, каким должен быть дизайн, когда соотношение сторон области просмотра станет альбомным, или даже раньше, если относительная высота недостаточна, чтобы ограничить полукруг достаточно маленькой областью, чтобы достаточное количество основного изображения проглядывает.
большое спасибо. я получил большой подарок!!! я использовал радиальный градиент, но ваш код лучше моего. Спасибо Спасибо!
Вероятно, наложение радиального градиента