当前位置：文江博客话题详情

图像背景突出显示或Z-index？

发布于 2024-10-28 10:08:30 字数 283 浏览 2 评论 0原文

我已经走了这么远（但你不会知道）。努力浏览我的艺术网站。

本页 http://rollinleonard.com/elements/ 此页面有一个小的覆盖 div，悬停在这些图像上。第一个 img 位于 div 的背景中。我希望该 img 也具有蓝色荧光笔效果。

我如何获得它，使其成为正常的 img，然后在该 img 之上的另一层上有我的导航（带有白色背景的文本）？

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

辞旧 2024-11-04 10:08:30

我认为最简单的方法是使您的第一个 div 像其他图像 a > 一样。 img 并将您的 nav 置于 absolute 位置。

HTML：

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

CSS：

nav {
   position: absolute;
}

I thick the easyest way to do this is to mak your first div like other image a > img and put your nav in absolute position.

HTML :

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

CSS :

nav {
   position: absolute;
}

回复收藏 0 原文

热风软妹 2024-11-04 10:08:30

@rollin，不需要使用js检查这个
http://jsfiddle.net/sandeep/f2662/

回复收藏 0 原文

伏妖词 2024-11-04 10:08:30

将您的 navwrap-div 包装在相同尺寸的另一个 div 中，并以第一个图像作为背景
将 navwrap div 的背景设置为透明
分配 z-index 值：0 表示新包装器，1 表示原始包装器，2 表示 nav-元素
将 mouseenter-handler 的选择器调整为“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>

仅出于演示目的使用样式的内联定义）

最好的问候，carsten

wrap your navwrap-div in another div of the same dimension with the first image as a background
set the background of your navwrap div to transparent
allocate z-index values: 0 for the new wrapper, 1 for original wrapper, 2 for the nav-element
adjust the selector of your mouseenter-handler to 'img, #navbg'. you may also have to guard the dynamic setting of your click handler on the overlay div (pointless if vent target is the new div).

your code looks like this:

<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>

(use of inline definitions for styles for demonstration purposes only)

best regards, carsten

回复收藏 0 原文

穿越时光隧道 2024-11-04 10:08:30

将其添加到 $(window).load() 事件内的 js 文件中

$('#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');
 });

add this in your js file inside the $(window).load() event

$('#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');
 });

回复收藏 0 原文

~没有更多了~