为什么CSS Transition不适用于background-image_使用opacity层叠实现-css教程-PHP中文网

background-image 不可动画，因 css 规范禁止其插值；需用 ::before/::after 伪元素分层+opacity 过渡实现渐变淡入淡出，注意 content、background-size、will-change 等细节。

为什么css transition不适用于background-image_使用opacity层叠实现

为什么 transition: background-image 完全没反应

不是写法错，是 CSS 规范明确禁止插值——background-image 被列为「不可动画属性」。哪怕两个 linear-gradient() 仅颜色不同，浏览器也无法计算中间帧，只会瞬间替换。你在 DevTools 里能看到新值已生效，但动画面板里压根没有帧，transition: background-image 0.3s 被静默忽略。

用 ::before + ::after 实现真·渐变淡入淡出

核心是绕开 background-image，把每层渐变拆到独立伪元素上，只对 opacity 过渡：

父容器设 position: relative，保证伪元素能绝对定位覆盖
::before 和 ::after 都加 content: ""、position: absolute、inset: 0
每层只挂一个 background-image（或 background: linear-gradient()），不混用
初始状态让其中一层 opacity: 0，另一层 opacity: 1
切换时只改 opacity，并绑定 transition: opacity 0.4s ease

示例关键片段：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.card { position: relative; }
.card::before, .card::after {
  content: "";
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 0.4s ease;
}
.card::before {
  background: linear-gradient(135deg, #6a11cb, #2575fc);
}
.card::after {
  background: linear-gradient(135deg, #ff416c, #ff4b2b);
  opacity: 0;
}
.card:hover::before { opacity: 0; }
.card:hover::after { opacity: 1; }

容易被忽略的三个坑

实操中真正卡住人的，往往不是逻辑，而是这些细节：

忘了给伪元素写 content: "" —— 浏览器直接不渲染，背景根本不出现在页面上
没设 background-size: cover 或 background-position: center —— 两张渐变图缩放/对齐不一致，淡入时出现“错位闪动”
没加 will-change: opacity（可选但推荐）—— 在部分 Chromium 旧版本或低端设备上，opacity 动画可能掉帧，加这句能提前触发合成层