Question

如上所示，我无法通过导航栏看到图片。请记住，我刚刚开始，我没有经验。这就是我所得到的，并且不知道从哪里开始。

<body>      
  <nav>
     <ul>
       <li><a class="active" href="index.html">Home</a></li>
       <li><a href="about.html">About</a></li>
       <li><a href="sights.html">Sights</a></li>
       <li><a href="sakura.html">Sakura</a></li> 
     </ul>
   </nav>
</body>

body{
background-image:url(pic1.jpg);
}
* {
padding:0;
margin:0;
}
nav {
height:70px;
text-align:center;
background-color:rgba(255, 10, 173, 0.27);
padding:20px;
}
nav li {
display:inline-block;
margin:0;
padding-top:20px;
}
nav li a {
text-decoration:none;
color:#FFF;
padding-left:150px;
padding-right:150px;
padding-top:20px;
padding-bottom:20px;
font-family:arial;
text-align:center;
background-color:rgba(170, 19, 120, 1);
}
nav li a:hover, .active {
background-color:rgba(255, 77, 181, 0.87);
}

i want it to look something like this

Answer 1

我认为您所期待的是opacity属性。

尝试添加：

opacity: 0.5;

到你的nav li a CSS，看看是否有帮助！

刚刚开始使用html和css进行编码，但我仍然坚持通过导航栏

1 个答案: