元素在另一个元素上的背景图像

目标是在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

元素在另一个元素上的背景图像

回答

相关问题