圖像背景突出或Z-index？

我到目前爲止（但你不知道它）。在我的藝術網站上掙扎。圖像背景突出或Z-index？

此頁 http://rollinleonard.com/elements/ 此頁面有一個覆蓋div的小東西，可以覆蓋這些img。第一個img在div的背景中。我想讓這個img也有這個藍色的熒光筆效果。

如何獲得它，使其正常img，然後在另一層上img有我的導航（白色背景文字）？

謝謝！

2011-03-30 Rollin

在$（窗口）內的js文件添加此.load（）事件

$('#navwrap').bind('mouseenter', function() { 
    var $this = $(this); 
    if ($this.not('.over')) { 
     $this.addClass('over'); 
     $overlay.css({ 
      width : $this.css('width'), 
      height : $this.css('height'), 
      top : $this.offset().top + 'px', 
      left : $this.offset().left + 'px' 
     }).show(); 
    } 
}).bind('mouseout', function() { 
    $(this).removeClass('over'); 
});

來源

2011-03-30 07:43:41

@羅林，也沒有必要使用JS檢查這個 http://jsfiddle.net/sandeep/f2662/

來源

2011-03-30 07:49:06 sandeep

我濃濃的easyest方式這樣做是爲了讓你的第一個div像其他圖像a > img並把你nav在absolute的位置。

HTML：

<nav>...</nav> 
<a href="#"> 
    <img src="home.gif" alt="Home BG" /> 
</a>

CSS：

nav { 
    position: absolute; 
}

來源

2011-03-30 07:52:35 DoubleYo

包住navwrap-DIV在同一維度中的另一個DIV與第一圖像作爲背景
設置的背景您的navwrap div透明
分配z-index值：0表示新包裝，1表示原包裝l包裝器，2爲導航元素
將您的mouseenter處理程序的選擇器調整爲'img，#navbg'。你可能還必須警惕覆蓋div上的點擊處理程序的動態設置（如果通風目標是新的div，則毫無意義）。

您的代碼如下所示：

<div id="navbg" style="width: 300px; height: 300px; z-index: 0; background-image: url('home.gif');"> 
<div style="z-index: 1; background-color: transparent;" id="navwrap"> 
<nav style="z-index: 2;" > 
... 
</nav> 
</div> 
</div>

（使用的樣式僅供演示內置定義）

最好的問候，卡斯滕

來源

2011-03-30 08:01:18 collapsar

圖像背景突出或Z-index？

回答

相關問題