导航栏中的重叠图像

是否可以在导航栏中重叠图像,而不会得到背景色和一些东西?图像或徽标本身不应具有任何背景颜色(继承的)并且应与导航栏重叠。我正在寻找这样的输出。

这是 CodePen 链接,试试看


HTML代码:

<nav>
    <ul>
        <li>
            <span class="logo">
                <img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">    
            </span>
        </li>
        <li><a href="" title="" class="active">Home</a></li>
        <li><a href="" title="">Our School</a></li>
        <li><a href="" title="">Academics</a></li>
        <li><a href="" title="">Lesson and Quizzes</a></li>
        <li><a href="" title="">Event &amp; News</a></li>
        <li><a href="" title="">Grades</a></li>
    </ul>
</nav>

CSS 代码:

* {
    margin: 0px;
}

nav {
    width: 100%;
    height: 100%;
    text-align: center;
    font-weight: lighter;
    font-size: 0.95em;
    font-family: Century Gothic;
    text-transform: uppercase;
    list-style-type: none;
    overflow: hidden;
    background-color: #343F64;
}

ul {    
    margin: 0;
    padding: 0;
    width: 100%;
}

li {
    display: inline;
    float: left;
}

li a {
    display: block;
    padding: 14px 16px;
    background-color: #343F64;
    color: white;
    text-decoration: none;
    padding-top: 25px;
    padding-bottom: 25px;
}

.active {
    color: #E9DB89;
}

li img {
    float: left;

}

img {
    margin-left: 75px;
}

#logo {
    float:left;
    z-index: 1000;
}
好的

我对您的代码进行了编辑以获得结果

* {
	margin: 0px;
}

nav {
	width: 100%;
	height: 70px;
	text-align: center;
	font-weight: lighter;
	font-size: 0.95em;
	font-family: Century Gothic;
	text-transform: uppercase;
	list-style-type: none;
	overflow: hidden;
	background-color: #343F64;
    position: relative;/*change here*/
}

ul {	
	margin: 0;
	padding: 0;
	width: 100%;
  position: absolute;/*change here*/
  right: -25%;/*change here*/
}

li {
	display: inline;
	float: left;
}

li a {
	display: block;
	padding: 14px 16px;
	background-color: #343F64;
	color: white;
	text-decoration: none;
	padding-top: 25px;
	padding-bottom: 25px;
}

.active {
	color: #E9DB89;
}

li img {
	float: left;

}

img {
	margin-left: 75px;
}
.line {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #111;
}
#logo {
	float:left;
	z-index: 1000;
  position: absolute;/*change here*/
}
<!--move logo outside nav-->
<span class="logo">
                <img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">    
            </span>
<nav>
		<ul>
			<li><a href="" title="" class="active">Home</a></li>
			<li><a href="" title="">Our School</a></li>
			<li><a href="" title="">Academics</a></li>
			<li><a href="" title="">Lesson and Quizzes</a></li>
			<li><a href="" title="">Event &amp; News</a></li>
			<li><a href="" title="">Grades</a></li>
		</ul>
	</nav>
<div class="line"></div>

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

引导导航栏菜单与文本重叠

来自分类Dev

appgyver导航栏图像

来自分类Dev

引导导航栏重叠div标签

来自分类Dev

UIButton图像未显示在导航栏中

来自分类Dev

导航栏重叠内容文本

来自分类Dev

流体导航栏中图像的垂直居中

来自分类Dev

状态栏与导航栏重叠:MPMoviePlayerController

来自分类Dev

导航栏重叠状态栏

来自分类Dev

CSS导航栏与图像

来自分类Dev

底部导航栏与上方的视图重叠

来自分类Dev

CSS:导航栏项目彼此重叠?

来自分类Dev

内容重叠的固定导航栏

来自分类Dev

元素与固定导航栏重叠

来自分类Dev

iOS:更改导航栏中的图像栏按钮

来自分类Dev

appgyver导航栏图像

来自分类Dev

引导导航栏重叠div标签

来自分类Dev

流体导航栏中图像的垂直居中

来自分类Dev

修复了导航栏重叠的问题

来自分类Dev

页脚导航栏重叠内容

来自分类Dev

引导导航栏中的附加图像

来自分类Dev

图像未显示在悬停的导航栏中

来自分类Dev

导航栏的标题视图重叠

来自分类Dev

如何重叠导航栏

来自分类Dev

CSS导航栏与图像

来自分类Dev

底部导航栏与Android中的ListView重叠

来自分类Dev

为什么我的输出与导航栏页面中的标题重叠

来自分类Dev

无法从导航栏中删除阴影图像

来自分类Dev

导航栏中的中心图像

来自分类Dev

如何在仍然响应的 boostrap 4 导航栏中制作重叠的徽标图像?