Question

.news-header {
background-image: url(maureske_green_left.gif), url(maureske_green_body.gif),    url(maureske_green_right.gif);
background-position: left, center, right;
background-repeat: no-repeat, repeat-x, no-repeat;
height: 31px;
}

这很有效，但maureske_green_body.gif的repeat-x使maureske_green_right.gif无法显示。

设置width并不能使正确的图像显示。

如果我在中心图像上no-repeat显示所有图像，但当然这三者之间存在差距。那么如何在不使中心图像宽度与网页相同的情况下进行修复呢？

提前致谢！

雅罗斯瓦夫

Answer 1

顶部图片层是你的css中的第一个，所以你需要这样重新排序：

background-image: url(maureske_green_left.gif), url(maureske_green_right.gif), url(maureske_green_body.gif);

简言之，你的新css将是：

.news-header {
    background: url(maureske_green_left.gif) no-repeat left top, 
        url(maureske_green_right.gif) no-repeat right top,
        url(maureske_green_body.gif) repeat center top;
    height: 31px;
}

有关多个css背景的有趣文章here

左右背景图像，中心图像的repeat-x使右图像不显示

1 个答案: