如何将视频适配放置在带透明区域的PNG背景下方并实现响应式兼容？

核心逻辑是用相对单位替代固定像素定位、用比例约束替代固定宽高，保证视频在不同屏幕尺寸下始终和椭圆透明区域对齐。

第一步：先获取椭圆参数 #

打开你的section9.png原图，测量三个数值：

• 椭圆自身的宽高比（比如你原视频设置的920*840，比例就是920/840）
• 椭圆左边缘距离背景图左边缘的宽度占背景图总宽度的百分比
• 椭圆上边缘距离背景图顶部的高度占背景图总高度的百分比

第二步：修改HTML代码 #

移除video标签上的固定width、height属性，避免固定像素破坏响应式：

<div class="section9 sm:pt-8 lg:grid lg:grid-rows-1 lg:grid-cols-2">
    <video class="video" loop="true" autoplay="autoplay" controls="false" id="vid" muted>
        <source src="../img/short-video-to-put-to-case-study-html.mp4" class="videopl" type="video/mp4">
    </video>
    <div class="section9-content space-y-2 lg:space-y-6 sm:text-center sm:top-3/4 lg:row-span-1 lg:col-start-2 lg:col-end-3 lg:place-self-center">
        <h1 class="font-black text-2xl lg:text-6xl wow animate__animated animate__bounce"><span class="lg:block"></span></h1>
        <p class="text-sm section9-text"></p>
    </div>
</div>

第三步：修改CSS代码 #

调整定位逻辑、增加比例约束和适配属性：

.section9 {
    background: url("../img/section9.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
    position: relative;
    /* 可改为min-height适配小屏内容高度，不需要固定高度可以保留原height:800px */
    min-height: 800px;
    /* 新增：隐藏超出容器的视频部分，避免溢出 */
    overflow: hidden;
}

.video {
    /* 替换为你自己测量的偏移百分比，以下为原固定值换算的示例值 */
    left: -4.2%;
    top: 16.3%;
    position: absolute;
    z-index: -1;
    cursor: default;
    /* 替换为你测量的椭圆占父容器宽度的比例，示例为48% */
    width: 48%;
    /* 替换为你测量的椭圆宽高比，保证视频比例和椭圆一致不变形 */
    aspect-ratio: 920 / 840;
    /* 新增：视频自动缩放填满容器，多余部分裁剪，无黑边 */
    object-fit: cover;
}

video::-webkit-media-controls-panel {
    display: none !important;
    opacity: 1 !important;
}

.section9-content {
    font-family: 'GalanoGrotesque-Regular';
    color: var(--grassGreen);
}

.section9-text {
    color: var(--gray);
}

调试技巧 #

调试时先把.video的z-index改为正数，调整left、top、width的数值让视频和椭圆完全对齐后，再把z-index改回-1即可。如果移动端椭圆位置有变化，可对应增加媒体查询调整对应断点下的参数。

旧浏览器兼容方案 #

如果需要兼容不支持aspect-ratio的低版本浏览器，可以给视频套一层比例容器实现：

<!-- 新增video包裹层 -->
<div class="video-wrapper">
    <video class="video" loop="true" autoplay="autoplay" controls="false" id="vid" muted>
        <source src="../img/short-video-to-put-to-case-study-html.mp4" class="videopl" type="video/mp4">
    </video>
</div>

对应CSS：

.video-wrapper {
    left: -4.2%;
    top: 16.3%;
    position: absolute;
    z-index: -1;
    width: 48%;
    /* 数值为 高度/宽度*100%，对应920/840的宽高比 */
    padding-top: 91.3%;
    position: relative;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

内容的提问来源于stack exchange，提问作者Stasa Bastrica