设置背景图片与视频时出现模糊问题的技术求助

云上老周

2026-8-25

背景图与全屏视频渲染模糊问题解决

问题描述

div/body元素的背景图渲染模糊，放大图片2倍后无改善
设置为全屏宽度的视频同样出现模糊情况
更换background-size为contain/cover替代百分比后，问题依旧存在

代码示例

.container{
    top: 5.2rem;
    position: relative;
    background-color: pink;
    padding-bottom: 30rem;
    width: 100%;
    background-image: url(/images/portfolio-image6.jpg);
    background-size: 100%;
    background-position:center;
}

解决方法

适配高DPI屏幕
高分辨率屏幕下，单倍分辨率图片会被强制拉伸导致模糊，用image-set提供多分辨率适配的图片：

.container {
    background-image: image-set(
        url(/images/portfolio-image6.jpg) 1x,
        url(/images/portfolio-image6@2x.jpg) 2x,
        url(/images/portfolio-image6@3x.jpg) 3x
    );
    background-size: cover;
    background-position: center;
}

关闭浏览器图像模糊优化
部分浏览器会对缩放后的图片自动添加模糊处理，添加以下CSS强制保留清晰度：
```
.container {
    image-rendering: crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}
```
修复视频拉伸变形
全屏视频模糊多因比例不符导致拉伸，给video标签设置object-fit: cover维持比例，同时确保视频源分辨率不低于目标屏幕最大分辨率：
```
<video src="your-video.mp4" style="width:100%; height:100vh; object-fit:cover;"></video>
```

固定容器宽高比
原代码用padding-bottom:30rem导致容器高度与背景图比例严重不符，引发过度拉伸，改用aspect-ratio匹配背景图实际比例：

.container {
    top: 5.2rem;
    position: relative;
    background-color: pink;
    width: 100%;
    /* 替换为背景图实际宽高比，比如16/9 */
    aspect-ratio: 16/9;
    background-image: url(/images/portfolio-image6.jpg);
    background-size: cover;
    background-position:center;
}