Question

在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分钟就可以回答......提前感谢任何答案....

Answer 1

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

意味着图像将根据需要自行重复。（沿x轴而不是repeat-y）。与：background-repeat: repeat-x;

相同

50% 50%

告诉图片左边50％，顶部50％。第一个值始终是x位置，而secound始终是y位置。与：background-position: 50% 50%;

相同

#f8f8f8

如果图片可能的话，背景颜色应为#f8f8f8 因任何原因无法加载。与：background-color: #f8f8f8;

相同

Answer 2

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;

Answer 3

这是background-position财产的简写。