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>中进行。所以当背景剪辑在背景之前时会发生错误，对吗？

为什么呢？你有什么主意吗？对不起，我的英语不好。（继承人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

Answer 2

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

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

div{height:15px;}

div{height:30px;}

div{height:20px;}

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

希望这能解决您的问题。

Answer 3

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

确定背景绘制区域，该区域决定了区域   在其中绘制背景。该属性的语法是   用
给出
= border-box |填充盒|内容箱