如何让navbar与绝对定位的SVG伪元素共享同一背景图？

核心思路 #

要让导航栏（nav）和其底部的SVG撕裂伪元素共享同一背景图，关键是让伪元素继承导航栏的背景，并通过SVG作为遮罩保留撕裂形状，同时保证背景完全对齐。

修改后的完整代码 #

CSS 代码

body, p {
    margin: 0;
}

nav {
    position: relative;
    /* 设置导航栏背景图，居中覆盖 */
    background: url(https://cdn.pixabay.com/photo/2019/08/21/05/24/vintage-4420182_1280.jpg) center/cover;
    padding-bottom: 15px; /* 预留伪元素高度空间 */
}

.navbar {
    padding: 10px 10px 5px 15px;
}

.navbar a {
    margin-right: 10px;
    color: white;
    text-decoration: none;
}

nav::after {
    content: "";
    position: absolute;
    z-index: 2;
    height: 15px;
    width: 100%;
    left: 0;
    bottom: 0; /* 定位到导航栏底部 */
    background: inherit; /* 继承导航栏的背景图 */
    /* 使用SVG作为遮罩，仅显示SVG形状内的背景 */
    -webkit-mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom/100% 100% no-repeat;
    mask: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/23618/rip.svg) bottom/100% 100% no-repeat;
}

HTML 代码

<body>
    <nav>
        <div class="navbar">
            <a class="active" href="#home">Home</a>
            <a href="#news">News</a>
            <a href="#contact">Contact</a>
            <a href="#about">About</a>
        </div>
    </nav>
    <img src="https://cdn.pixabay.com/photo/2013/07/13/13/36/triangle-161210_1280.png" width="100%">
</body>

关键修改说明 #

1. 补全CSS单位：原代码中padding、margin缺少px单位导致样式失效，已补充完整。
2. 导航栏相对定位：给nav添加position: relative，让伪元素的绝对定位基于导航栏，确保位置准确。
3. 背景继承+遮罩实现撕裂效果：伪元素通过background: inherit直接复用导航栏的背景图，再用mask属性将SVG作为遮罩，只显示SVG轮廓内的背景，实现和导航栏背景无缝衔接的撕裂效果。
4. 修正HTML结构：将nav标签移至body内部，符合HTML规范。

内容的提问来源于stack exchange，提问作者Mathias Sven