CSS和JS - 將背景圖像延伸到div以外

我目前正試圖找到一種解決方法，讓Niall Doherty的Coda Slider 2上的箭頭突出顯示選定的選項卡。最初我試圖用標題圖片上的圖片做這件事，雖然在我的Mac上Safari看起來不錯，但它並不是其他設備上的中心（參見www.lukekendalldesign.co.uk/pss/productsandservices）CSS和JS - 將背景圖像延伸到div以外

我試着用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; 
}

我想要做的，就是位置這黑色箭頭在灰度圖像箭頭（如果是有道理的呢？）我該怎麼辦這個？

我已經嘗試添加邊距和填充，但它擴展了灰色的背景，並沒有推下背景圖像黑色三角形。

雖然我已經找到了解決方案類似，似乎都不適用，因爲類.current使用以下JS應用：

// 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問題，這是有點超出我的深度！ :(

來源

2012-07-02 Luke Kendall

我試過這個在Firefox中使用fire bug在windows上，我認爲有兩個問題，第一個是ul元素的邊距應該是167px（黑色箭頭不在一個漂亮的地方圖像（中間是232像素，你的意思是這個？）箭頭只需要向下移動，我通過設置背景位置爲： url（「../ images/triangle.png」）no-重複滾動50px 60px透明希望這有幫助

來源

2012-07-02 21:02:18 john

謝謝約翰 - 關於167px，你指的是水平定位？如果是這樣，這是設置爲50％，因爲我需要確保它在每個標籤的中心 - 每個標籤的寬度取決於標題。我已經剛剛完成了你提到的第二次編輯，但是現在我根本看不到箭頭？ –

167px用於ul元素樣式。它寫道：.coda-nav ul margin-left：170px應該是167px或圖像中的箭頭需要移動。對不起，你是對的我以爲我排隊了，但我剛擺脫它，哈哈！我應該更加小心。我會有更多的想法。 – john

我看到了，我現在編輯了167px，謝謝。這個箭頭非常討厭我！ –

CSS和JS - 將背景圖像延伸到div以外

回答

相關問題