Question

我对这一切都很陌生。我是图书馆学的学生，我正在尝试创建一个简单的导航结构，其中包含位于导航上方的悬停和活动链接之上的背景图像。我已经看了很长时间了，并且（整个代码可能并不完美 - 我很抱歉！我正在学习！）这是我的一部分真的很挣扎。

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

Answer 1

您需要引用图像图像路径：

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

如何使用背景图像创建导航栏链接？

1 个答案: