如何在导航链接后面放置图像？

Question

我试图在我的导航栏后面放置一张图片，我希望它固定在页面的右上角，但我很难尝试这样做。
这就是我希望页面显示的内容：

这是我的HTML：

<div class="navbarcn">
<div class="navbar">
    <img src="bamboo.png">
    <nav class="header">
        <a class="active" href="javascript:;">HOME</a>
        <a class="headl" href="menu.html">MENU</a>
        <a class="headl" href="about.html">ABOUT</a>
    </nav>  
</div>

CSS：

.navbarcn{
  margin:0;
  height:120px;
  position:fixed;
  width:100%;
}  
.navbar{
  float:right;
  text-align:right;
  width:100%;
  height:200px;
}  
.navbar img{
  width:250px;
  float:right;
}  
.navbar a{
  padding:10px;
  text-decoration: none;
  font-size:1.4em;
  font-weight: bold;
}

Answer 1

给.navbarcn背景图片

.navbarcn{
margin:0;
height:120px;
position:fixed;
width:100%;
background-image:url('bamboo.png');
} 

Answer 2

首先，您不应该使用img这种样式。使用CSS。 （这里我已经注释掉了图像）。

<div class="navbarcn">
<div class="navbar">
    <!--  <img src="bamboo.png"> -->
    <nav class="header">
        <a class="active" href="javascript:;">HOME</a>
        <a class="headl" href="menu.html">MENU</a>
        <a class="headl" href="about.html">ABOUT</a>
    </nav>  
</div>

接下来，添加一些背景属性以定位navbar。

.navbarcn{
    margin:0;
    height:120px;
    position:fixed;
    width:100%;
}

.navbar{
    float:right;
    text-align:right;
    width:100%;
    height:200px;

    background-image: url(https://placekitten.com/100/50);
    background-repeat: no-repeat;
    background-position: top right;
}  

/*.navbar img{
    width:250px;
    float:right;}
*/

.navbar a{
    padding:10px;
    text-decoration: none;
    font-size:1.4em;
    font-weight: bold;
}

小提琴：https://jsfiddle.net/Lf4exsv7/

使用IMG与CSS背景图像：When to use IMG vs. CSS background-image?

Answer 3

.navnarcn的父级必须明确定义css属性position。

Answer 4

使用背景将是一个更好的解决方案，但这也很好 使用图像的绝对位置

.navbar{
    position:relative;
}
img{
    position: absolute;
    top:5px;
    right:5px;
    display block;
    z-index:-1;
}

Answer 5

有两种解决方案

最佳方式

.navbarcn{
  background: url('path to your image')
}

替代方式

.navbar img{
  height: 35px
}
.navbarcn{
  margin-top: -35px
}