背景图像切断项目外。我怎样才能展示它？

Question

我的背景图片正确定位在ul项目的背景上。

我想将它放在石灰容器的边缘，但是当我正确定位它时，它会切断图像中不在容器内部的任何部分。

即使它在容器外面，我怎样才能显示它，而不是像这样切断它？

期望的结果

CSS

body ul#main_navigation li li:hover > a, body ul#main_navigation li li.over > a
{
     background-image:url(/images/nav_arrow_right.png);
     background-repeat:no-repeat;
     background-position: 197px 12px;
     background-color: #0F0;
     color: #FFF;
}

Answer 1

我不认为你可以有一个破坏容器边界的图像。您可以尝试使li略宽，以容纳箭头图像，然后将子元素移动到左侧。

或者您可以将箭头作为子元素的背景。

Answer 2

为什么不将此图像作为子列表的第一个列表项的背景？

Answer 3

您不能从任何元素突出background-image。您可以使用附加到元素的span，或将背景图像附加到其旁边的元素，从而产生幻觉它是原始元素的一部分。

就我个人而言，我会在位于div之外的元素中使用带有背景图像的span。