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元素的顶部对齐另一个背景（为6px高（因此为padding-bottom:6px））

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

我查看了css3多个图像，但我知道我可以使用右，主，左图像用逗号分隔， 但我更喜欢 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/

多个图像顶部和底部在一个元素css3？

1 个答案: