Bootstrap 3 Fixed Top Navbar - 样式底部边缘答案

【问题标题】：Bootstrap 3 Fixed Top Navbar - style bottom edge [closed]Bootstrap 3 Fixed Top Navbar - 样式底部边缘
【发布时间】：2015-09-01 12:26:03
【问题描述】：

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

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

不知道如何继续......

只是为了玩，这是一个透明背景的草 png。

【问题讨论】：

请查看有关 Stack Overflow 的How to ask 问题以及can be asked 的问题类型以及should be avoided. 的问题类型
请发布您尝试过的代码，凯尔！
根据“可以提出的问题类型”页面，我的问题符合标准。 “但如果你的问题通常涵盖……一个特定的编程问题”

标签： css twitter-bootstrap-3 navbar

【解决方案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;
}

&lt;div class="navbar"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

希望这可以帮助您解决问题:)

【讨论】：

让那些 cmets 倒退。大声笑这很有意义，可以按我的意愿工作，谢谢！
很高兴能帮上忙 :)
只是好奇，但您是否觉得这个问题不符合准则？