元素在另一個元素上的背景圖像

目標是在div＃滑塊元素的背景圖像上渲染「a」元素的背景圖像。元素在另一個元素上的背景圖像

首先，這裏是代碼：

<div id="top_bg"> 
    <div id="top"> 
     <nav> 
      <ul> 
       <li><a href="#">Link onegfdgdfg gd</a></li> 
       <li><a href="#">Link two</a></li> 
       <li><a href="#">Link three</a></li> 
       <li><a href="#">Link four</a></li> 
       <li><a href="#">Link five</a></li> 
      </ul> 
     </nav> 
    </div> 
</div> 

<div id="slider"> 
</div>

jFiddle鏈接包含了我對這個嘗試：http://jsfiddle.net/zorza/drBBC/11/

我有一個相對的「禮」內的「a」元素的絕對定位嘗試，這讓我有辦法給它z-index，所以它可以出現在#slider上。它幾乎可以工作，但要求「li」具有恆定的寬度以將「a」定位在其內部，這導致當內部文本比恆定寬度更寬時（參見第一個菜單項），導致不好的方式。

我想得到的是一個「a」元素來設置它自己的寬度取決於內部文本和擺脫一個「li」元素的恆定寬度，所以菜單項之間的差距將是甚至。

我想出的第二種方法是將#slider背景分成兩個圖形，並將其中的一個（帶有箭頭高度的那個）放在#top div背景圖像內。這樣一個「a」元素不需要被絕對定位。但是這個解決方案並不完美，在需要改變圖像時會造成各種麻煩。

來源

2013-03-11 zorza

#top-bg{ 
    background-image:url('yourImage.png'); 
}

這將工作。不需要div＃背景。

編輯試試這個：

a:hover :after{ 
    width:0; 
    height:0; 
    content:''; 
    border:10px solid transparent; 
    border-top-color:#333333; 
    position:absolute; 
    top:100%; 
    left:49%; 
}

我認爲應該工作。不添加圖像，並沒有放置新的元素和重新定位

來源

2013-03-11 20:06:31 sourRaspberri

如果你願意，你也可以用你的logo做同樣的事情。 @zorza – soyuka 2013-03-11 20:08:14

這將需要構建和定位我的網站的整個標題，從開始，我想避免。頁面的結構比jFiddle示例稍微複雜一些（真正的網站：http://interclick2.home.pl/fiddle/1/index.php）。在現有的標記中沒有辦法做到這一點？ – zorza 2013-03-11 20:29:07

對於初學者來說，我知道'z-index'不適用於JS小提琴。我不完全確定你想達到什麼。你想要圖像位於'a'元素下是嗎？ – sourRaspberri 2013-03-11 20:46:18

您是否嘗試過錨，對項目的寬度是一樣的大小

li, a { 
display: /*block or inline-block depending on the layout you were after*/ 
}

和自動寬度爲

a { 
width: auto; 
}

來源

2015-03-07 01:53:07 Gl1tch3t

元素在另一個元素上的背景圖像

回答

相關問題