gpt4 book ai didi

jquery - 无法将图像固定到 Bootstrap 导航栏的顶部

转载 作者:太空宇宙 更新时间:2023-11-04 08:55:52 26 4
gpt4 key购买 nike

好吧,所以我在这里遇到了一些绝对定位问题。

这就是我想要完成的。

enter image description here

如果你仔细观察这个黑色导航的顶部,你会发现一个透明的画笔效果,它是由 PNG 黑色画笔描边完成的。我位于它自己的 div 中。我想要做的就是将这个 div 修复在默认的黑色 Bootstrap 导航栏之上。

为了做到这一点,我使用了相对于环绕导航栏的 div 的绝对定位(它是相对于它的)

,但我遇到了奇怪的问题,例如隐藏的溢出不起作用。有人可以看看我的代码并告诉我我做错了什么吗?谢谢。

HTML

  <nav class="navbar navbar-inverse">



<div class="container-fluid">


<div class="navbar-header">

<!-- BrushStroke PNG Shit -->


<div class="img-wrap">
<img class="image-responsive black-brush" src="img/blackbrushnew.png">
</div>


<!-- BrushStroke PNG Shit -->

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Italian Joe's</a>
<p class="navbar-text text-center" id="NavHours" style="color:white; width: 230px;"> Open 6am to 5pm </p>
</div>

<div class="collapse navbar-collapse" id="myNavbar">

<ul class="nav navbar-nav navbar-right">
<li id="Home" class="active"><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About</a></li>
<li id="location"><a href="#">Location</a></li>
</ul>
</div>
</div>
</nav>
</div>

<!-- End Navbar -->

CSS

.blackbrush{
position: absolute;
top: -135%;
text-align: center;
margin: 0 -1000px;
z-index: 100;
mix-blend-mode: multiply;
}
.img-wrap {
overflow: hidden;
}

最佳答案

将一个类添加到您的navbar-header div。说一些xyz类然后像下面这样添加你的背景图片

 .xyz
{
background-image:url('img/blackbrushnew.png');
}

img-wrap 类删除你的 div。

关于jquery - 无法将图像固定到 Bootstrap 导航栏的顶部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43132284/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com