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

Question

我正在制作一个个人网站，我需要一些关于网页侧面导航栏的帮助。基本上，这是我的背景代码:

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)，以充当简单的导航栏。这必须在我的背景之上，我稍后会添加图片链接，使它们成为可点击的图标。但问题是，我似乎无法弄清楚如何将图像添加为背景之上的另一层(它们只是在背景之上)。

提前感谢您花时间阅读这篇文章并做出回答。

• 瑞安

Answer 1

你想要这样的东西吗？ 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>

并且您可以编辑间距(例如，如果您希望图片齐平，则从左边缘开始；如果您想要间隙，则从每张图片的下方和上方开始。)