html - CSS帮助在背景前添加PNG？

我正在建立一个个人网站，我需要网页侧面导航栏的帮助。基本上，这是我为背景准备的代码：

html {
            background: url(index_bg.PNG) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
         }

背景和其他一切都很好，但我想在我的网页的侧面对齐4张图片（PNG），以充当简单的导航栏。这必须位于我的背景之上，稍后我将向这些图片添加链接，以便它们成为可单击的图标。但是问题是这样，我似乎无法弄清楚如何将图像添加为背景顶部的另一层（它们只是在背景上方）。

在此先感谢您抽出宝贵的时间阅读并回答本文。


瑞安

最佳答案

你想要这样的东西吗？ http://jsfiddle.net/jofish999/54r0vk8L/

html {
  background: url(http://www.greenhdwallpaper.com/wp-content/uploads/2014/10/grass-pictures-free-6.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: -o-background-size: cover;
  background-size: cover;
}
img {
    width:175px;
    height:125px;
    display: block;
}

<a href="#"><img src="http://media1.santabanta.com/full1/Animals/Cats/cats-54a.jpg"></a>
<a href="#"><img src="http://cattpix.com/file/2013/11/cute-cat-wallpaper.jpg"></a>
<a href="#"><img src="http://inspirekids.designdecor.in/kids/cute-cat/cute-cat-pic-8.jpg"></a>

并且您可以编辑间距（例如，如果要使图片平齐，请从左边缘开始；如果要留有间隙，则可以在每张图片的上方和下方）。

关于html - CSS帮助在背景前添加PNG？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27637944/