css - 使用 Less CSS 时解析错误返回具有背景属性的无法识别的输入错误消息？

Question

我无法使用 LESS CSS 库找出我的 css 有什么问题。

当我使用 LESS 运行我的网站时出现此错误。但对我来说，CSS 似乎是有效的。我的 CSS 有什么问题，或者我不能使用 LESS？

background: url(css/img/home-bg3.jpg) no-repeat;
    background-clip: ( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -webkit-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -moz-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -o-linear-gradient( transparent, transparent ) , url(css/img/home-bg3.jpg) no-repeat;
    background-size: 100% cover;

Answer 1

background-clip 属性的值似乎无效，这导致 less 编译器抛出错误。

background-clip 仅支持border-box or content-box or padding-box or 继承作为值。

例如，下面的代码可以正常编译。

.sample{
    background: url(css/img/home-bg3.jpg) no-repeat;
    background-clip: content-box;
    background: -webkit-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -moz-linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
    background: -o-linear-gradient( transparent, transparent ) , url(css/img/home-bg3.jpg) no-repeat;
    background-size: 100% cover;
}

background-clip - MDN Specification

补充说明:

错误实际上是由于以下区域中指示的缺失值而引发的:

background-clip: ( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;
/*--------------^*/

下面的代码可以正常编译，但不会有任何效果，因为根据规范，background-clip 属性不支持该值。

background-clip: linear-gradient( transparent, transparent ), url(css/img/home-bg3.jpg) no-repeat;