不同的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。）

來源

2013-08-29 T_01

background是背景屬性的簡寫符號。這將覆蓋更早的所有其他背景規則。即使-webkit-background-clip有一個供應商前綴，它仍然是一個背景屬性。在第二個示例中，當您使用簡寫符號設置背景屬性時，它會被覆蓋。

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

例

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

演示

Try before buy

來源

2013-08-29 10:51:31 insertusernamehere

ouu好吧！非常好的解釋，謝謝！ –

這稱爲級聯，CSS的最終目標是表示在級聯中聲明最後的那些項目。

例如，假設下面是樣式表中的CSS聲明。

div{height:15px;} 

div{height:30px;} 

div{height:20px;}

所以DIV將採取高度是20px，因爲這是最後一個宣佈的規則，它會覆蓋所有早些時候宣佈的其他規則。

希望這可以解決您的查詢。

來源

2013-08-29 10:44:28 Nitesh

-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 |填充框|內容框

來源

2013-08-29 10:49:50 koningdavid

不同的CSS規則導致不同的結果

回答

相關問題