這個CSS代碼在導航區塊中做了什麼？

我下面這個教程：http://tutorialzine.com/2010/02/html5-css3-website-template/這個CSS代碼在導航區塊中做了什麼？

在CSS文件的代碼塊看起來是這樣的：

nav { 
    background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8; 
    padding:0 5px; 
    position:absolute; 
    right:0; 
    top:4em; 
}

是什麼這部分的代碼呢？：50% 50% #f8f8f8

我來到這裏了很多努力後搜索假設，誰知道它的人需要有1分鐘時間回答....感謝您事先的任何答案....

來源

2014-09-19 peter_ziegler

它使圖像位置在x軸和z軸上爲50％。 – Azrael 2014-09-19 10:06:24

您可以在這裏看到：http://www.w3schools.com/cssref/css3_pr_background.asp – 2014-09-19 10:06:46

檢查[docs]（https://developer.mozilla.org/en/docs/Web/CSS/background）後，那應該是'background-position'和'background-color'屬性值。 – 2014-09-19 10:06:48

background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;

是短手用於設置多個CSS屬性一次。

我會打破它：

url(img/gradient_light.jpg)

這意味着你將背景設置爲IMG/gradient_light.jpg。同：background-image: url(img/gradient_light.jpg);

repeat-x

意味着圖像將重複其自身需要horizontaly。（沿着x軸而不是從repeat-y開始）。相同：background-repeat: repeat-x;

50% 50%

表明圖片應該是左起50％，起頂50％。第一個值始終是x位置，secound始終是y位置。同：background-position: 50% 50%;

#f8f8f8

說，的backgroundColor應#f8f8f8，如果畫面可能不得以任何理由加載。相同：background-color: #f8f8f8;

來源

2014-09-19 10:08:18

主要問題是在那個位置「從頂部50％，從左邊50％」，這裏是我的主要困惑。 – 2014-09-19 10:13:04

第一個值是alwas x位置和第二個y位置。 – 2014-09-19 10:15:52

沒問題，非常感謝.. – 2014-09-19 10:16:51

The background property是速記設置個別background-* CSS屬性：

<final-bg-layer> = <bg-image> || <position> [/<bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

你的情況，background:url(img/gradient_light.jpg) repeat-x 50% 50% #f8f8f8;達到相同如下：

background-image: url(img/gradient_light.jpg); 
background-repeat: repeat-x; 
background-position: 50% 50%; 
background-color: #f8f8f8;

來源

2014-09-19 10:06:33

這是一個短手background-position財產。

參見here for more infos。

來源

2014-09-19 10:07:03 meriadec

這個CSS代碼在導航區塊中做了什麼？

回答

相關問題