Question

我正在使用以下css代码来获取li的背景，使其底部带有箭头的圆角矩形。

background-image:url("../image/menu_button_active_left.png"), url("../image/menu_button_active_bg.png"), url("../image/menu_button_active_right.png"), url("../image/menu_button_active_bottom.png"); 
background-position:center left, center center, center right, center 43px; 
background-repeat:no-repeat, repeat-x, no-repeat, no-repeat

我的问题是在background_left和background_right上方显示的图像background_bg，它会阻止显示圆角矩形。

此外，我希望背景底部位于z-index（顶部）（我的意思是我希望background_bottom隐藏background_bg底部的1px高度，但现在background_bg位于z-index（顶部）隐藏1 px在background_bottom图像的顶部）

请帮帮我。

--------重复解决方案：找到--------

我试过

background-clip:border-box, content-box, border-box, border-box;

并且效果很好。

请帮我把background_bottom_image放在上面（比如z-index）所有其他背景图片。

Answer 1

我找到了解决问题的方法。

background-clip:border-box, content-box, border-box, border-box;

使用上面的背景剪辑使其成为圆角矩形

并使用堆栈排序，我将bottom_background作为第一个使其显示在所有其他background_images之上

谢谢大家。

多个背景图像，防止重叠

1 个答案: