不同顺序的 CSS 规则会导致不同的结果

Question

我刚刚看了一下 CSS background-clip。这是一种用图像掩盖文本的方法。 (或者反过来？^^)。无论如何，我认为 CSS 中的语句顺序不会影响结果，但背景剪辑会影响结果。

此效果的 CSS 通常如下所示:

.text{
    color: transparent;
    background: url(pic.ending);
    -webkit-background-clip: text;
}

所以，这是第一个 <p>在下面的 fiddle 中。但是当我将其顺序更改为以下内容时:

.text_wrong{
    -webkit-background-clip: text;
    color: transparent;
    background: url(pic.ending);
}

这是行不通的。文本未被屏蔽，背景出现在孔中 <p> .所以当背景剪辑在背景之前时会发生错误，对吧？

为什么？你有什么主意吗？对不起，我的英语不好。 (这里是 fiddle。)

Answer 1

background 是背景属性的简写符号。这将覆盖之前制定的所有其他背景规则。即使 -webkit-background-clip 有一个供应商前缀，它仍然是一个背景属性。在您的第二个示例中，当您使用速记符号设置背景属性时，它会被覆盖。

要使您的示例正常工作，您可以使用 background-image 而不是 background。

示例

/* sets a single property */
background-color: red;
/* overwrites all single properties */
background: no-repeat;

演示

Try before buy