CSS过渡异常：同背景色视频与元素淡入淡出时出现方块

当尝试对带有纯色背景的图片或视频执行淡入淡出操作，同时为拥有相同背景色的HTML元素应用相同的opacity过渡效果时，图片/视频周围会出现明显的“方块”。为何相同设置下两者的表现存在差异？

代码片段 #

CSS

.bluebg {
  position: relative;
  padding: 30px;
  background: gray;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 100px;
}

.bluebg:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: '';
  background: #325795;
  opacity: 0;
  visibility: hidden;
}

.bluebg video {
  position: absolute;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
}

.bluebg video,
.bluebg:after {
  transition: all 2s;
}

.bluebg:hover video,
.bluebg:hover:after {
  opacity: 1;
  visibility: visible;
}

HTML

<div class="bluebg">Hover me
  <video playsinline autoplay muted loop width="300" src="https://lionmusicals.dk/xaskepot/wp-content/uploads/glitterlogo-blue.webm"></video>
</div>

原因分析 #

核心差异来自像素媒体与纯CSS元素的渲染逻辑不同：

• 纯CSS背景元素（比如示例中的:after伪元素）的opacity过渡，是直接对纯色背景做透明度插值计算，渲染时会和下方的灰色背景完美融合，不存在边缘色彩偏差。
• 视频/图片属于像素化媒体，即使视觉上背景是纯色，也会因为以下原因出现色彩偏差：
  1. 编码/压缩过程中，为了优化文件大小，会对边缘像素做抗锯齿或色彩近似处理，导致实际像素颜色和设置的#325795存在极细微差异；
  2. 媒体文件的透明通道（如果存在）或边缘像素的alpha值，和纯CSS元素的opacity计算逻辑不一致。
     当opacity过渡时，这些细微偏差和下方灰色背景混合后，就会显现出明显的“方块”轮廓。

解决方法 #

推荐几种简单有效的修复方案：

1. 混合模式融合：给视频/图片添加mix-blend-mode: multiply，让媒体像素和背景色自动融合，消除边缘差异：

.bluebg video {
  /* 原有属性保留 */
  mix-blend-mode: multiply;
}

2. 匹配背景色：给视频/图片设置和背景元素完全一致的背景色，确保边缘过渡时颜色统一：

.bluebg video {
  /* 原有属性保留 */
  background: #325795;
}

3. 遮罩淡化边缘：使用CSS mask给视频/图片添加柔和的边缘遮罩，淡化边界感：

.bluebg video {
  /* 原有属性保留 */
  mask: linear-gradient(to bottom, #000, #000 95%, transparent 100%);
  -webkit-mask: linear-gradient(to bottom, #000, #000 95%, transparent 100%);
}

内容的提问来源于stack exchange，提问作者Shane Akira