这个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代码在导航区块中做了什么？

回答

相关问题