CSS解讀背景速記

我需要打破別人的簡寫手寫一點幫助。CSS解讀背景速記

這是我一直在考慮什麼：

background: url("img.png") repeat scroll 0 0%, -moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent;

我已經得到了這麼遠：

background-image:url('jAGNPCMaDe9LJ5wqwVhLimg.png');

但剩下的肯定是一竅不通。我很好奇-moz-linear-gradent（）。這是所有瀏覽器都認可的嗎？而且我猜在括號中的顏色必須應用漸變效果（從-moz-線性漸變推斷）又是什麼「重複滾動0 0％」嗎？

來源

2012-09-18 coffeemonitor

-3

這裏是你的草書：

#element{ 
    background-image:url(img.png); 
    background-repeat:repeat; 
    background-attachment:scroll; 
    background-position:0 0; 
    background-color:transparent 
    background-image:-moz-linear-gradient(#4E4E4E, #1C1C1C); 
}

的-moz-線性漸變只能在Mozilla。這就是爲什麼它是用-moz-預先固定的。正如你猜對的那樣，它會以線性漸變作爲背景，而不是圖片。但只有在Mozilla中，所有其他瀏覽器才使用後臺規則。漸變的選項不需要重複，因爲它們與其他所有瀏覽器相同。

來源

2012-09-18 11:59:28

你似乎只分解了其中的一半，而另一半卻只剩下一半（事實上，它自己懸掛着）。這是一個語法錯誤。 – BoltClock

是的，因爲它與其他瀏覽器的選項完全相同。但是我已經對它進行了編輯並完全擺脫了它，因爲漸變選項只是現有背景選項的重複。 –

這仍然是錯誤的...位置不相同，圖層不分割成單獨的屬性。看到我的答案是正確的分解方法。 – BoltClock

你實際上在看那裏的多個背景。逗號是分隔符。

url("img.png") repeat scroll 0 0% /* on top */ 
-moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent /* on bottom */

梯度走的是背景圖像的斑點。其餘的應該很容易通過閱讀background財產。

https://developer.mozilla.org/en-US/docs/CSS/background

來源

2012-09-18 11:55:42 cimmanon

看看Mozilla的參考here和主要部分here。這些應該爲您提供一個很好的「方式」和-moz-XXX前綴的解釋。

來源

2012-09-18 11:58:24 onoma

由於cimmanon has mentioned，你實際上在看兩個背景合併成一個簡單的background聲明。逗號分隔兩層。多種背景的組合是new to CSS3。所以，你必須在速記符號兩個不同背景圖層：

url("img.png") repeat scroll 0 0% 
-moz-linear-gradient(#4E4E4E, #1C1C1C) repeat scroll 0 0 transparent

而且每個膨脹到它自己的一套價值觀。

代碼的正確普通寫法膨脹是這樣的：

background-image: url("img.png"), -moz-linear-gradient(#4E4E4E, #1C1C1C); 
background-repeat: repeat, repeat; 
background-attachment: scroll, scroll; 
background-position: 0 0%, 0 0; 
background-color: transparent;

注意，再次使用逗號分隔多個背景層。只有一個background-color，因爲你不能有多個背景顏色。

另外如前所述，-moz-前綴是Mozilla的供應商擴展，用於其實驗性實現linear gradients。但是，除非您的所有其他適用的供應商擴展都重複您的background聲明，否則您的代碼將僅適用於Mozilla瀏覽器，並且由於供應商擴展而不適用於其他瀏覽器。

還要注意的是，如果你使用的草書代碼上面，而不是速記，非對應的瀏覽器將只忽略的background-image申報和申請其他事物一樣，不像非對應的瀏覽器會忽略完全速記。

來源

2012-09-18 12:58:01 BoltClock

CSS解讀背景速記

回答

相關問題