如何创建带有背景图片的导航栏链接？

我对此很新颖。我是一名图书馆学科学生，我正在尝试创建一个简单的导航结构，其中包含位于导航栏上方的悬停和活动链接之上的背景图片。我已经看了很长时间了，（虽然整个代码可能并不完美 - 我很抱歉，我在学习！）这是我真正努力的部分。如何创建带有背景图片的导航栏链接？

这里的HTML：

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Untitled Document</title> 
<link href="ex4.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
    <div id="nav"> 
    <ul> 
     <li><a href="home.html">Home</a></li> 
     <li><a href="instruction.html">Instruction</a></li> 
     <li><a href="innovation.html">Innovation</a></li> 
     <li><a href="community.html">Community</a></li> 
     <li><a href="about.html">About</a></li> 
    </ul> 
    </div> 
</body> 
</html>

而CSS：

@charset "UTF-8"; 
/* CSS Document */ 

body { 
    width: 100%; 
    max-width: 960px; 
    margin: 0 auto; 
    } 

#nav { 
    width: 600px; 
    padding: 30px 20px 0 20px; 
    background-color: lavender; 
    height: 50px; 
    position: absolute; 
    left: 170px; 
    top: 50px; 
    text-align:center; 
    margin-left: auto; 
    margin-right: auto; 
} 

#nav ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    height: 1.5em; 
    border-bottom: 1px solid #2B2434; 
} 

#nav ul li { 
    display: inline-block; 
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace; 
    text-transform: uppercase; 
    align-content: center; 
} 

#nav ul li a { 
    padding: 30px 20px 15px 20px; 
} 

#nav ul a:link, #nav ul a:visited { 
    color: #443743; 
    text-decoration: none; 
} 

#nav ul a:hover, #nav ul a:active { 
    color: #443743; 
    text-decoration: none; 
    background-image: url(/document.png); 
    background-size: 100px 100px; 
    background-repeat: no-repeat; 
}

来源

2016-04-07 perfectstorms

究竟是什么问题吗？ – Maxwelll

对不起，我没有意识到我没有说清楚。背景图片没有出现在导航栏中。 – perfectstorms

请检查您的图片路径。 – abhi312

你需要引用您的图片路径：

background-image: url("/document.png");

来源

2016-04-07 03:11:15 gmfm

如何创建带有背景图片的导航栏链接？

回答

相关问题