使用<image>语法的CSS @property初始值报错，如何正确声明？

正确声明支持URL/渐变的CSS @property（类型） #

问题出在类型的initial-value必须是浏览器能直接解析的有效图像值，且不能依赖外部资源加载，否则整个@property规则会被忽略。以下是具体解决方法：

核心原因 #

• RGB颜色不属于类型，直接使用会触发类型不匹配错误。
• 用url()指向外部图片时，浏览器解析@property规则时无法确认资源是否存在/可加载，导致初始值无效，规则被舍弃。

正确声明方式 #

用CSS渐变作为初始值——渐变属于CSS生成的，无需依赖外部资源，浏览器能直接解析，不会触发报错：

@property --bg-image {
  syntax: '<image>';
  inherits: false;
  initial-value: linear-gradient(#ffffff, #ffffff);
}

如果需要初始值为“无图像”，也可以用image(none)（兼容性稍差，建议优先用渐变）：

@property --bg-image {
  syntax: '<image>';
  inherits: false;
  initial-value: image(none);
}

使用示例 #

声明后，你可以正常将变量设置为渐变或任意URL：

/* 正常工作的<color>对比示例 */
@property --text-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #333;
}

.card {
  color: var(--text-color, #666);
  background-image: var(--bg-image, url('fallback-bg.jpg'));
}

/* 动态修改为渐变 */
.card:hover {
  --bg-image: linear-gradient(45deg, #f06, #3cf);
}

/* 动态修改为外部图片 */
.card.featured {
  --bg-image: url('featured-bg.jpg');
}

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