Question

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

但是第二和第三背景没有显示出来。

这是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;
}

Answer 1

这是因为背景的顺序与规则中出现的顺序相同。这意味着，第一个始终位于顶部，最后一个位于其他每个位置之后。所以你应该将第一个作为最后一个，以便在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。

Answer 2

所有图像彼此重叠。尝试在firebug中逐个禁用，然后检查

Answer 3

此外，为了拥有更有条理/更清晰的代码，我会改变像我一样背景到背景图像。

请注意，如果元素名称为“background-image”而不是“background”，则浏览器中的白色背景可能会覆盖图像。

我知道这是更清晰的代码，但它以某种方式弄乱了我的图像。

CSS第二和第三背景没有显示

3 个答案: