CSS如何实现图片后方自定义形状背景等比偏移自适应

目标效果参考：

要实现跨设备等比稳定的装饰块效果，核心逻辑是让装饰块的定位、尺寸完全绑定包裹图片的父容器，从根源避免尺寸变化时的错位、变形问题。

原有代码失效原因 #

• 包裹图片和装饰块的.img-bg容器未设置相对定位，绝对定位的装饰块会向上查找最近的非静态定位祖先，找不到则相对视口定位，屏幕尺寸变化时必然错位
• 装饰块未固定宽高比，不同屏幕下图片自适应产生宽高比变化时，装饰块会被拉伸变形
• 装饰块的偏移值未和图片容器绑定，比例无法随图片尺寸同步缩放
• 额外使用span标签实现装饰块产生冗余DOM，用CSS伪元素实现更简洁易维护

最终实现代码 #

修正后的CSS样式 #

:root {
    --primary-blue: hsl(231, 69%, 60%);
    --primary-red: hsl(0, 94%, 66%);
    --neutral-blue-100: hsl(229, 8%, 60%);
    --neutral-blue-900: hsl(229, 31%, 21%);
    --neutral-100: hsl(0, 0%, 100%);
    --neutral-900: hsl(0, 0%, 0%); 
}

*, 
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: 'Rubik', sans-serif;
    font-size: 18px;
    margin: 0;
    text-align: center;
}

h1 {
    font-weight: 500;
}

.mt-3 {
    margin-top: 3em;
}

.content {
    width: 85%;
    margin: 0 auto;
}

/* 图片与装饰块的共同父容器：核心设置相对定位 */
.img-bg {
    position: relative;
    isolation: isolate;
    width: 100%;
    overflow: visible;
}

/* 图片设置更高层级，盖在装饰块上方 */
.img-bg img {
    display: block;
    width: 95%;
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* 用伪元素实现装饰块，无需额外HTML标签 */
.img-bg::after {
    content: '';
    position: absolute;
    z-index: 1;
    /* 偏移值全部相对父容器设置，和图片保持固定相对位置 */
    right: -7.5%;
    bottom: -2rem;
    width: 85%;
    /* 固定宽高比，和图片比例匹配，避免形状拉伸 */
    aspect-ratio: 16/10;
    background-color: var(--primary-blue);
    border-radius: 31% 0% 0% 28%;
}

修正后的HTML结构 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">
    <title>Frontend Mentor | Bookmark landing page</title>
</head>
<body>
    <section class="hero mt-3">
            <div class="content">
                <div class="img-bg">
                    <img src="https://i.imgur.com/r9cTpLM.png" alt="Bookmark manager interface preview">
                </div>
                <div>
                    <h1>A Simple Bookmark Manager</h1>
                </div>
            </div>
    </section>
</body>
</html>

调整说明 #

• 装饰块的偏移位置可通过修改right/bottom属性调整，正值向内收、负值向外扩，可适配截图里溢出屏幕边缘的效果
• 装饰块形状可通过修改border-radius的数值自定义，因为固定了宽高比，任何圆角设置在不同设备下都会保持形态一致
• 如果需要更换其他自定义形状（比如三角形、不规则曲线块），可以把background-color换成clip-path或者内联SVG背景，定位逻辑保持不变即可，依然能实现等比缩放不偏移。

内容的提问来源于stack exchange，提问作者Sachin Jadhav