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

Question

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

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

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

所以，这是<p>下面小提琴中的第一个。但是当我将其顺序更改为以下时：

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

它不起作用。文本没有被遮盖，背景发生在孔中<p>。所以当背景剪辑在背景之前时会发生错误，对吗？

为什么？你有什么主意吗？对不起，我的英语不好。（这是小提琴。）

score 3 · Accepted Answer

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

为了使您的示例工作，您可以使用background-image而不是background.

例子

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

演示

score 1 · Accepted Answer

这称为级联，CSS 的最终目标是表示在级联中最后声明的那些项目。

例如，假设下面是您在样式表中的 CSS 声明。

div{height:15px;}

div{height:30px;}

div{height:20px;}

因此 div 将采用高度，20px因为这是最后声明的规则，它将覆盖之前声明的所有其他规则。

希望这能解决您的疑问。

score 1 · Accepted Answer

根据 w3c 规范，该值text不是background-clip规范中列出的值。因此支持可能是错误的！

确定背景绘制区域，该区域确定绘制背景的区域。该属性的语法由

= 边框 | 填充框| 内容框

3 回答 3