css - 背景图像在项目之外被截断。我怎样才能让它显示出来？

Question

我有一个正确定位在 ul li 项目背景上的背景图像。

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

即使它在容器之外，我怎样才能让它显示出来，而不是像这样被切断？

期望的结果

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附加到元素，或将背景图像附加到它旁边的元素，给人一种它是原始元素一部分的错觉。

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