我有一个CSS @property，它使用 <image> 语法——想要一个选项可以把它设为URL或渐变。

然而，initial-value 出错：

这会导致该规则被忽略。

下面有一个示例，请注意 syntax: "<color>" 属性能够工作并回退到初始值，而 syntax: "<image>" 会失败：

 @property --my-background { 
    syntax: "<image>";  
    inherits: true; 
    initial-value: oklab(0.91 -0.18 0.22); /* vivid green */
 }

 @property --my-colour { 
    syntax: "<color>";  
    inherits: true; 
    initial-value: oklab(0.48 0 -0.31); /* vivid blue */
 }

 div {
     background:    var(--my-background);
     color:         var(--my-colour);
     width:         100vw;
     height:        100vh;
     font-size:     10vh;
     align-content: center;
     text-align:    center;
 }

<div>this should be blue text on a green background</div>

我尝试了RGB颜色、image() 和 url() CSS函数，但似乎没有一个是 <image> 的有效初始值。

如何用 <image> 语法正确声明这个CSS @property？

解决方案

颜色不是图片。如果你想让颜色成为图片，把它做成单色渐变（渐变其实是一张图片）

@property --my-background {
  syntax: "<image>";
  inherits: true;
  initial-value: conic-gradient(oklab(0.91 -0.18 0.22) 0 0);
}

@property --my-colour {
  syntax: "<color>";
  inherits: true;
  initial-value: oklab(0.48 0 -0.31);
}

div {
  background: var(--my-background);
  color: var(--my-colour);
  font-size: 10vh;
  padding: 30px;
  text-align: center;
}

<div>this should be blue text on a green background</div>