CSS第二和第三个背景不显示

我有一个有3个背景的元素。一个沿x轴在顶部重复一次。第二个应该在左上角显示一次，在右上角显示第三个。CSS第二和第三个背景不显示

但第二和第三个背景没有显示。

这里是CSS：

section.services .container header { 
    background: url('../images/style/header_gradient.jpg'), 
       url('../images/style/header_gradient_cover_left.png'), 
       url('../images/style/header_gradient_cover_right.png'); 
    background-position: left top, left top, right top; 
    background-repeat: repeat-x, no-repeat, no-repeat; 
}

来源

2013-05-22 loxyboi

正如@pzin所提到的，当使用多个背景图像时，图像的顺序是违反直觉的。它们按照它们列出的相反顺序显示。首先列出的最后一个显示在最前面。使用简写语法来协调它可能会更容易：'background：url（...）no-repeat left top，url（...）no-repeat right top，url（...）repeat-x left top ;' –

这是因为背景的顺序与您的规则中显示的顺序相同。这意味着，第一个始终位于顶端，而最后一个位于其他位置。所以，你应该把第一个作为最后一个，使得重复在x轴的一个不重叠别人：

section.services .container header { 
    background-image: url('../images/style/header_gradient_cover_left.png'), 
        url('../images/style/header_gradient_cover_right.png'), 
        url('../images/style/header_gradient.jpg'); 
    background-position: left top, right top, left top; 
    background-repeat: no-repeat, no-repeat, repeat-x; 
}

此外，为了有一个更有条理/更干净的代码，我会改变background到像我一样，我也是background-image。

来源

2013-05-22 15:29:45 pzin

Thankyou，那工作。 – loxyboi

全部影像相互重叠。尝试在萤火虫中逐一禁用，然后检查

来源

2013-05-22 15:27:58 Ani

此外，为了有一个更有组织/更干净的代码，我会将背景更改为background-image，就像我一样。

请记住，如果元素名称为'background-image'而不是'background'，则来自浏览器的白色背景可能会覆盖图像。

我知道它是更干净的代码，但它不知何故弄乱了我的图像。

来源

2015-10-31 05:58:50

CSS第二和第三个背景不显示

回答

相关问题