如何在设置了clip-path的元素上叠加图片？Tailwind+Next.js开发场景

• 直接给父元素设置clip-path会创建新的层叠上下文，同时会裁剪所有超出裁剪区域的后代元素，哪怕后代设置了absolute定位和更高的z-index也会被裁掉
• 你当前将图片放在.herotest外部，两个同级元素的层叠顺序受层叠上下文影响，设置了clip-path的.herotest默认层级高于普通未创建层叠上下文的元素，所以图片会被背景盖住
• 你给图片设置的z-index生效的前提是父容器也要设置非static定位，否则z-index不会在同级元素对比中生效

推荐用伪元素承载裁剪背景的方案，避免父容器裁剪后代内容，修改代码如下：

1. 修改CSS样式 #

.herotest {
  position: relative;
  /* 移除原有的background、clip-path配置，交给伪元素实现 */
}

.herotest::before {
  content: "";
  position: absolute;
  inset: 0; /* 等同于top/right/bottom/left都为0 */
  background: white;
  background-image: url("../public/assets/background.png"), linear-gradient(90deg, rgba(78,84,200,1) 50%, rgba(143,148,251,1) 100%);
  background-size: cover;
  background-position: center;
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% 35%, 0% 100%);
  clip-path: polygon(0 0, 100% 0%, 100% 35%, 0% 100%);
  z-index: -1; /* 让背景层始终在内容下方 */
}

2. 修改JSX结构 #

把图片移入.herotest内部，直接通过定位控制位置，无需负margin：

function Hero() {
    return (
        <>
            <div className="herotest h-full">
                <div className="max-w-6xl m-auto block md:pt-10">
                    <Nav />
                    <div>
                        <div className="text-center lg:text-left px-5 md:pl-10 pt-10 md:pt-24">
                            <h1>Make smarter decisions</h1>
                            <h2>Ravelin provides technology and support to help you prevent <br></br> evolving fraud threats and accept payments with confidence.</h2>
                            <div className="overflow-visible relative flex justify-center lg:justify-start mt-5 pb-48">
                                <a
                                    href="#"
                                    rel="noopener"
                                    className="inline-block py-2 px-4 rounded-md bg-blue-light text-white cursor-pointer"
                                >
                                    <span>View solutions</span>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
                {/* 叠加的图片放在herotest内部最后 */}
                <div className="absolute right-0 top-0 z-10 mt-20 lg:mt-10 pointer-events-none">
                    <img
                        width={'514px'}
                        height={'620px'}
                        style={{ maxHeight: 620 }}
                        src="/assets/product.png"
                        alt="dashboard"
                    />
                </div>
            </div>
        </>
    );
}

export default Hero;

• 确认.herotest的父元素有明确高度，否则h-full不会生效，会导致背景裁剪区域异常
• 如果需要保留图片在外部的结构，给图片的父容器添加relative定位，再设置z-index:20（数值高于.herotest的层级即可）即可正常展示
• Tailwind默认z-index最大为50，如果你自定义过z-index配置，确认你设置的z-index数值没有冲突

内容的提问来源于stack exchange，提问作者Elektra Murphy