不同的CSS规则导致不同的结果

问题描述：

我只是看了一下CSS background-clip。它是一种用图像掩盖文字的方法。（或者相反？^^）。无论如何，我认为CSS中的语句顺序不会影响结果，但是它具有背景剪辑。不同的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。）

答

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

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

例

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

演示

Try before buy

ouu好吧！非常好的解释，谢谢！ –

答

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

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

div{height:15px;} 

div{height:30px;} 

div{height:20px;}

所以DIV将采取高度是20px，因为这是最后一个宣布的规则，它会覆盖所有早些时候宣布的其他规则。

希望这可以解决您的查询。

-1，因为，虽然这是没有错的，它不是完全相关。@ insertusernamehere的答案地址当使用'background'快捷键时实际发生的事情。这也有可能过度简化级联：它值得[阅读此]（https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Cascading_and_inheritance）以全面掌握最新进展上。这不是级联的一个例子，只是覆盖了以前声明的样式。 – CherryFlavourPez

thnx - @CherryFlavourPez提到。但是OP已经明确地将他的代码放在了他特别改变属性规则级联的地方，并且导致他得到这个问题。所以我会坚持我的回答，如果真的值得整改，我会愿意纠正。 – Nitesh

但是最重要的一点是，* not *写着'div {height：15px;}'后面跟着'div {height：20px;}'产生了一个div高20px的div（这对于那些只有很少 - 没有CSS知识）。相反，某些速记属性会以一种不太透明的方式覆盖先前声明的样式（'背景“就是一个明显的例子，但也有其他的例如'font'）。 – CherryFlavourPez

答

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

http://www.w3.org/TR/css3-background/#background-clip

确定背景画区域，其确定在其中背景被绘制的区域。该属性的语法为给出

= border-box |填充框|内容框

不同的CSS规则导致不同的结果

相关推荐