如何通过CSS实现随视口宽度连续改变元素透明度？

你可以通过以下几种方式实现需求：

方法1：利用clamp与线性运算（兼容现代浏览器） #

通过乘法替代除法（规避calc不能除以带单位值的限制），直接计算出符合opacity要求的无单位数值：

.element {
  /* 视口宽度≤500px时opacity=0.5，≥1000px时opacity=1，中间线性过渡 */
  opacity: clamp(0.5, calc((100vw - 500px) * 0.001 + 0.5), 1);
}

计算逻辑：

• 视口宽度500px时：(500px-500px)*0.001 +0.5 = 0.5
• 视口宽度1000px时：(1000px-500px)*0.001 +0.5 = 1
• 中间宽度按线性比例计算，clamp自动将数值限制在0.5-1区间内

方法2：使用CSS Houdini的@property（现代浏览器支持） #

通过定义数值类型的自定义属性，让浏览器将带单位的计算结果自动转换为无单位数值，更贴近你最初的思路：

/* 声明数值类型的自定义属性 */
@property --opacity-value {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.5;
}

.element {
  --opacity-value: clamp(0.5, calc(100vw / 1000), 1);
  opacity: var(--opacity-value);
}

方法3：结合JavaScript动态计算（兼容全浏览器） #

如果需要适配旧浏览器，可通过JS实时计算视口宽度比例，再通过CSS变量传递给opacity：

<script>
  function updateOpacity() {
    const viewportWidth = window.innerWidth;
    const opacity = Math.min(1, Math.max(0.5, viewportWidth / 1000));
    document.documentElement.style.setProperty('--opacity', opacity);
  }
  // 初始化与窗口 resize 时更新
  updateOpacity();
  window.addEventListener('resize', updateOpacity);
</script>

<style>
  .element {
    opacity: var(--opacity, 0.5);
  }
</style>

内容的提问来源于stack exchange，提问作者Jakub Janowski