Published on

关于背景图的自适应阴影

关于背景图的自适应阴影

效果如下

效果图

如何实现？

首先我们需要一个带有背景图片的div

<div style={{ backgroundImage: `url(${png})` }} className="after-shadow relative h-[300px] w-[300px] rounded-full bg-cover"></div>

其次给他添加一个伪元素


.after-shadow::after {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    background: inherit;
    filter: blur(20px);
    z-index: -1;
}