Bootstrap 3固定顶部导航栏 - 底部边缘

Question

正在为一个网站玩一个想法，并想知道如何在导航栏底部边缘悬挂在页面主体上添加一个不规则形状的透明png。

我已经看过一些关于放置超大徽标的教程和答案，但想知道是否有可能让图像一直重复，固定在栏的底部边缘。

不确定如何继续...

只是为了玩一些东西，这里有一片透明背景的草。

Answer 1

如果必须，使用伪元素似乎是最佳的

body {
  padding: 0;
  margin: 0;
  background: orange;
}
.navbar {
  width: 100%;
  position: fixed;
  height: 50px;
  background: lightblue;
}
.navbar:after {
  content: '';
  position: absolute;
  top: 100%;
  width: 100%;
  height: 35px;
  background-image: url(http://i.stack.imgur.com/9EhS4.png);
  background-size: auto 100%;
  background-repeat: repeat-x;
}

<div class="navbar"></div>

Answer 2

我做了一个JsFiddle here。我可以解释我在这里所做的一切，但是小提琴有很多解释所有内容的评论。它的作用是设置图像absolute的位置，width为100％，top边距等于导航栏的高度。

希望这可以帮助您解决问题：）