在 CSS/HTML 中为导航栏上的按钮添加图像
Posted
技术标签:
【中文标题】在 CSS/HTML 中为导航栏上的按钮添加图像【英文标题】：Adding an Image for Button on a Navigation Bar in 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" 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>
<a href="http://students.cpcc.edu/~ehiggin1/web_140/images/sitemap_original.png">Sitemap Public Image</a>
<a href="http://www.gliffy.com/go/publish/9966553">Wireframe Public Image</a>
</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" 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。
【问题讨论】：
【参考方案1】：只需以 HTML 而不是 CSS 添加图像，然后设置它们的样式。
假设您不想要“关于我、照片编辑、视频编辑、写作”标签...只需将其添加到您的 <a> 标签中：
<img src="/images/about-me.jpg" >
然后在你的 CSS 中只定位图像：
#navMenu ul li a img width: 254px; height: 35px;
然后你只需要添加任何样式来定位。
对于悬停效果，只需在第一个图像旁边添加另一个图像，为其添加一个类，然后在 CSS 中应用 display: none;到那个图像。在<a> 标签悬停时，只显示：无；第一个图像和显示：块；第二张图片。
您还需要为包含 <a> 的标签添加相对定位，并为图像添加绝对定位，以便当您将鼠标悬停在它们之上和离开它们时，它们可以彼此重叠。
如果您想了解更具体的信息，请根据您当前的状态创建一个 codepen 或 jsfiddle。
【讨论】：
以上是关于在 CSS/HTML 中为导航栏上的按钮添加图像的主要内容，如果未能解决你的问题，请参考以下文章
JSQ 消息视图控制器：在导航栏上添加“返回”按钮和图像，Swift
UINavigationBar translucent 移除添加在导航栏上的图像