wordpress - 一个元素 css3 中的多个图像顶部和底部？

Question

在 Wordpress 中，我的主菜单中有这种结构:

#menu-primary .sub-menu {    
    background:url('images/submenu_background_top.png') no-repeat 0 0;
    width:159px;
    padding-bottom:6px;    
}

图像 submenu_background_top.png 位于 .submenu 元素的顶部，它是一个 ul。

我想在 .submenu 顶部对齐另一个背景 - 元素(高 6 像素(因此 padding-bottom:6px))

在“正常情况”下，我可以在 .submenu 元素的底部放置一个完全定位的元素，并在其中放置一个图像，但我不想更改主题的 html(用于主菜单)我正在使用。

我查看了 css3 多张图片，但我知道我可以使用 right、main、left -image 以逗号分隔，但我更愿意 topimage, bottomimage用逗号分隔 - 我看不到在 css3 中实现这一点的能力。我使用 css3 没有问题，因为它很容易创建图像后备。

#menu-primary .sub-menu {    
    background:url('images/submenu_background_top.png') no-repeat 0 0;
    width:159px;
    /* How to put a bottom image here that is 6px high? (but still have image above in this element) */
    padding-bottom:6px;    
}

Answer 1

您必须用逗号分隔不同图像的背景值，如下所示:

background-image: url('images/submenu_background_top.png'), url('images/submenu_background_bottom.png');
background-position: top left, bottom left;
background-repeat: no-repeat;

JSFiddle:http://jsfiddle.net/Z5c8n/