0

我有一个具有 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;
}
4

3 回答 3

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我一样改变。

于 2013-05-22T15:29:45.690 回答
0

所有图像都相互重叠。尝试在firebug中一一禁用，然后检查

于 2013-05-22T15:27:58.790 回答
0

此外，为了有一个更有条理/更干净的代码，我会像我一样将背景更改为背景图像。

请记住，如果元素名称是“背景图像”而不是“背景”，则浏览器中的白色背景可能会覆盖图像。

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

于 2015-10-31T05:58:50.470 回答