导航栏中的重叠图像

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

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

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

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

导航栏中的重叠图像

Overlapping Image in Navigation Bar

html

css

navbar