CSS和JS-将背景图像扩展到div之外

Question

我目前正在尝试寻找一种解决方法，以使Niall Doherty的Coda Slider 2上的箭头突出显示所选的标签。 最初，我尝试使用标头图像上的图像进行此操作，尽管虽然在Mac上的Safari中看起来不错，但它在其他设备上并不重要（请参阅www.lukekendalldesign.co.uk/pss/productsandservices ）

我尝试使用CSS箭头来创建它，但事实证明这相当困难，因此我发现了使用背景图片的解决方法，但遇到了另一个问题。

http://cl.ly/HovO （对不起，我无法上传图片-新手！）

请参考上面的链接截图。 与背景匹配的较浅的灰色三角形是标题图像的一部分。 使用以下CSS代码定位黑色三角形：

.coda-nav ul li a.current { 
    border-top-right-radius: 10px; 
    border-top-left-radius: 10px; 
    color: white;
    height: 60px; 
    z-index: 20000;
    background: url(../images/triangle.png) no-repeat 50% 100%;
    position: relative;
    overflow: visible;
}

我正在尝试做的是将这个黑色箭头放在灰色图像箭头所在的位置（如果这完全有意义？）我该怎么做？

我尝试添加页边距和填充，但是它会扩展灰色背景，并且不会将背景图像的黑色三角形向下压。

尽管我发现了类似的解决方案，但是似乎没有一个解决方案，因为使用以下JS应用了.current类：

// If we need a tabbed nav
    $('#coda-nav-' + sliderCount + ' a').each(function(z) {
        // What happens when a nav link is clicked
        $(this).bind("click", function() {
            navClicks++;
            $(this).addClass('current').parents('ul').find('a').not($(this)).removeClass('current');
            offset = - (panelWidth*z);
            alterPanelHeight(z);
            currentPanel = z + 1;
            $('.panel-container', slider).animate({ marginLeft: offset }, settings.slideEaseDuration, settings.slideEaseFunction);
            if (!settings.crossLinking) { return false }; // Don't change the URL hash unless cross-linking is specified
        });
    });

我非常感谢任何人都可以在此方面提供的帮助-因为这是一个JS问题，所以这超出了我的理解范围！ :(

Answer 1

我已经在Firefox中使用Windows上的萤火虫尝试过此操作。 我认为有两个问题。 首先是ul元素上的边距应为167px（黑色箭头不在图像中的好位置（中间为232 px，是您的意思？）。箭头只需要向下移动即可，将背景位置设置为：url（“ ../ images / triangle.png”）不重复滚动50px 60px透明希望这会有所帮助。