CSS中如何利用属性计算实现基于高度的颜色渐变？-css教程-PHP中文网

用 linear-gradient 实现静态高度渐变背景需指定方向（如 to bottom）和颜色停靠点；它按元素自身高度100%铺满，不依赖固定高度；必须用 background-image 而非 background-color；现代浏览器兼容良好，旧版 safari 需加 -webkit- 前缀。

css中如何利用属性计算实现基于高度的颜色渐变？

用 `linear-gradient` 实现静态高度渐变背景

直接写死方向 + 颜色停靠点就能搞定从上到下、从左到右的固定高度渐变。关键不是“高度”本身，而是渐变方向与容器尺寸的配合。

to bottom 是最常用写法，等价于 180deg，颜色从顶部 0% 开始，到底部 100% 结束
若容器高度不固定（比如内容撑开），linear-gradient(to bottom, #ff7e5f, #feb47b) 仍会铺满整个高度——它按元素自身高度 100% 计算，不是按视口或文档总高
别用 background-color 想实现渐变，它只接受单色；必须用 background-image: linear-gradient(...)
兼容性没问题：现代浏览器都支持标准语法，旧版 Safari 需加 -webkit-linear-gradient 前缀（仅需保留给 iOS

滚动时动态改色相？用 `--hue` + `hsl()` 替代重绘

想让背景色随滚动深度变化（比如滚到一半变橙，到底变紫），不能靠 JS 直接设 style.backgroundColor，那会触发 layout，卡顿明显。

在 :root 里定义变量：--hue: 0，然后样式中写 background-color: hsl(var(--hue), 80%, 60%)
JS 里计算：const maxScroll = document.documentElement.scrollHeight - window.innerHeight;，再算 const hue = Math.min(360, (window.scrollY / maxScroll) * 360);
更新变量用 document.documentElement.style.setProperty('--hue', hue)，浏览器自动插值渲染，无 layout
监听滚动必须加 { passive: true }，否则 Chrome 会警告；节流推荐用 requestAnimationFrame，不是 setTimeout

伪元素叠加实现“渐变到渐变”的过渡动画

原生 CSS 不支持两个 linear-gradient 之间 transition，直接写 transition: background-image 会失效或跳变。

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

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

下载

方案是用 ::before 和 ::after 各画一层渐变背景，初始 opacity 一高一低
hover 或 JS 触发时，交换 opacity：.box:hover::before { opacity: 0; } .box:hover::after { opacity: 1; }
两层渐变结构要一致（同方向、同 stop 数量），否则过渡会错位；颜色 stop 位置建议统一用百分比（如 red 0%, blue 100%）
注意 z-index 和 background-clip 配合，避免文字被盖住；pointer-events: none 加在伪元素上防止干扰交互

文字颜色渐变为什么 `color` 不能直接 transition？

因为 color 属性本身不支持渐变值，你写的 color: linear-gradient(...) 是无效的。真正生效的是组合属性。

主流做法是：background-image: linear-gradient(...); -webkit-background-clip: text; color: transparent;
Firefox 支持 background-clip: text 但需开启 flag（layout.css.background-clip-text.enabled），所以生产环境仍得靠 -webkit- 前缀
别试图给 color 加 transition——它只能过渡纯色；想动效就得换思路，比如用 mask-image + opacity 动画，或 SVG <text></text> + fill 动画
移动端 WebKit 内核对 -webkit-text-fill-color 和 -webkit-background-clip 兼容稳定，iOS 15+ 可放心用