-3

如何为导航栏的每个链接制作不同的背景？

例如，我希望将一张照片作为主页链接的背景，然后将另一张照片作为关于链接的背景，将另一张照片作为联系我链接的背景。

这可以只用 CSS 完成吗？？？

谢谢大家 ：）

4

1 回答 1

3

对于链接

如果您实际上是指链接本身的背景，则将 css 类名称应用于每个链接并单独设置它们的样式。例如：

<ul>
    <li class="homeLink"><a href="home.html">Home</a></li>
    <li class="aboutLink"><a href="about.html">About</a></li>
    <li class="contactLink"><a href="contact.html">Contact</a></li>
</ul>

在你的样式表中

.homeLink { background-image:url(/img/home.jpg); }
.aboutLink { background-image:url(/img/about.jpg); }
.contactLink { background-image:url(/img/contact.jpg); }

对于页面

对于页面，将 css 类名称应用于 body 标记而不是链接。

    <body class="homePage">...

或……或……

在你的样式表中

.homePage { background-image:url(/img/home.jpg); }
.aboutPage { background-image:url(/img/about.jpg); }
.contactPage { background-image:url(/img/contact.jpg); }
于 2013-05-19T18:58:14.530 回答