Question

是否可以在导航栏中重叠图像，而无需获取背景颜色和某些内容？图像或徽标本身不应具有任何背景颜色（即继承）并且应与导航栏重叠。我正在寻找output like this.

<小时/> 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;
}

Answer 1

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

＆＃13;

* {
	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*/
}

＆＃13;

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

＆＃13;

Answer 2

这是另一种变体，不使用绝对定位：

HTML：

<div id="header_container"> 

    <div id="header">
        <div class="logo">
                <img src="https://static.wixstatic.com/media/c86d4e_46042d8a0d99473f82209f03ab4dd146~mv2.gif" alt="Star of Hope" title="Star of Hope" id="logo">    
            </div>  

        <div class="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>
        </div>
    </div>
</div>

CSS：

* {
        margin: 0px;
    }

    #header_container {
      width: 100%;
      height: 100px;
      background-color: #343F64;
    }

    #header {
    margin: 0 auto;
      width: 1200px;

    }

    .nav {
      float: left;
      margin-top: -100px;
      margin-left: 350px;
      height: 100px;
        text-align: center;
        font-weight: lighter;
        font-size: 0.95em;
        font-family: Century Gothic;
        text-transform: uppercase;
        list-style-type: none;
        overflow: hidden;
    }

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

导航栏中的重叠图像

2 个答案: