在 CSS/HTML 中为导航栏上的按钮添加图像答案

【问题标题】：Adding an Image for Button on a Navigation Bar in CSS/HTML在 CSS/HTML 中为导航栏上的按钮添加图像
【发布时间】：2016-07-11 12:18:02
【问题描述】：

我需要为导航栏中的导航按钮使用图像。现在，我将它设置为一种颜色，当悬停在上面时，它会改变颜色。

但是，我需要图像而不是颜色。我已将按钮图像的大小调整为在我的 css 中设置的确切高度和宽度。

对于每个 ul 的：关于我、照片编辑、视频编辑、写作，我必须有一个按钮。我有图片，它的宽度和高度是正确的。

这是我的 HTML 代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CHANGE ME!</title>
<link href="css/styles_finished.css" rel="stylesheet" type="text/css" media="all">
<link href="css/mainnav.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>

<!--Start Container for Whole Site-->
<div id="container">

  <!--Start Header Content-->
  <div id="header">
    <div id="logo">
         <a href="index.html"><img src="images/logo.png" width="350" height="80" alt="My
          Logo" border="0" /></a></div>


  </div><!--End Header Content-->

      <!--Start Navigation ontainer-->

<div id="wrapper">
  <div id="navMenu">


    <ul>
    <li><a href="#">About Me</a>
    </li>
    </ul>



    <ul>
    <li><a href="#">Photo Edits</a>
    </li>
    </ul> 



    <ul>
    <li><a href="#">Video Edits</a>
    </li> 
    </ul>

    <ul>
    <li><a href="#">Writing</a>
    <ul>
    <li><a href="#">Samples</a></li>
    <li><a href="#">Recognition</a></li>
    </ul> <!--end inner UL-->
    </ul><!--End main ul-->



<br class="clearFloat" />




</div> <!--End Navigation Container-->
</div> <!--End wrapper div-->


      <!--Start Media Area-->
  <div id="media">
        <h1>Images/Rich Media</h1>
      <p>(470 x 550)</div>
  <div id="text">
    <h1>Main Body Text</h1>
      <p>(470 x 400)</p>

      </div><!--End Text Area Here-->

  <!--Start Footer Here-->
  <div id="footer">
        <h1>Footer (50 x 1024)</h1>
            <p> 
                <a href="http://voo2do.com/pub/module_6_Evan_Higgins">Voo2Do Public Task List</a> &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://students.cpcc.edu/~ehiggin1/web_140/images/sitemap_original.png">Sitemap Public Image</a> &nbsp;&nbsp;&nbsp;&nbsp;
                <a href="http://www.gliffy.com/go/publish/9966553">Wireframe Public Image</a> &nbsp;&nbsp;&nbsp;&nbsp;
            </p>



      </div> <!--End Footer Here-->

</div><!--End Container for whole site-->


    <div id="w3"><!--Start HTML 5 Validation Button Here-->
    <p>
    <a href="http://validator.w3.org/check?uri=referer"><img src="images/valid_html5.gif"  alt="Valid HTML 5" height="31" width="88" style="border:0px;" /></a></p></div><!--End HTML 5 Validation Button Here-->

      </body>
      </html>

这是我的导航栏 CSS 代码：

#navMenu {
    margin:0;
    padding:0;


}

#navMenu ul {
    margin: 0;
    padding:0;
    line-height: 30px;

}

#navMenu li {

    margin: 0;
    padding:0;
    list-style:none;
    float: left;
    position: relative;
    background-color: #C0C0C0;

}

#navMenu ul li a {

    text-align: center;
    text-decoration: none;
    height: 35px;
    width: 254px;
    display:block;
    color: #FFF;
    border: 1px solid #FFF;
    text-shadow: 1px 1px 1px #000;
}

#navMenu ul ul {

    position:absolute;
    visibility: hidden;
    top:32px;
}

#navMenu ul li:hover ul {

    visibility:visible;

}

#navMenu li:hover {

    background: #09f;
}

#navMenu ul li:hover ul li a:hover {

    background: #CCC;
    color: #000;
}

#navmenu a:hover {

    color:#000;

}


.clearFloat {

    clear:both;
    margin:0;
    padding:0;
}

我试图将 url(images/navbutton.jpg) 放在 #navMenu 中，但没有成功。无论我将图像置于何种选择之下，都不会发生任何事情。然后最重要的是，我的按钮还必须有一个与背景图像不同的翻转图像。所以我有两张图片。一个图像将是按钮，第二个图像将在悬停时出现。我要斗鸡眼了，呃。有人可以帮帮我吗？注意我没有使用 JS 或 JQ。

【问题讨论】：

标签： html css navigation

【解决方案1】：

只需以 HTML 而不是 CSS 添加图像，然后设置它们的样式。

假设您不想要“关于我、照片编辑、视频编辑、写作”标签...只需将其添加到您的 <a> 标签中：

<img src="/images/about-me.jpg" alt="About Me">

然后在你的 CSS 中只定位图像：

#navMenu ul li a img { width: 254px; height: 35px; }

然后你只需要添加任何样式来定位。

对于悬停效果，只需在第一个图像旁边添加另一个图像，为其添加一个类，然后在 CSS 中应用 display: none;到那个图像。在<a> 标签悬停时，只显示：无；第一个图像和显示：块；第二张图片。

您还需要为包含 <a> 的标签添加相对定位，并为图像添加绝对定位，以便当您将鼠标悬停在它们之上和离开它们时，它们可以彼此重叠。

如果您想了解更具体的信息，请根据您当前的状态创建一个 codepen 或 jsfiddle。

【讨论】：