在 CSS 中为导航栏添加噪点纹理效果

Question

是否可以在 CSS 中向导航栏添加噪波层？喜欢这个：

使用 CSS 或背景图像（无需在 Photoshop 或类似工具中进行编辑。）

.navbar-inner {
  min-height: 40px;
  padding-right: 20px;
  padding-left: 20px;
  background-color: #fafafa;
  background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
  background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
  background-image: linear-gradient(to bottom, #ffffff, #f2f2f2);
  background-repeat: repeat-x;
  border: 1px solid #d4d4d4;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
  *zoom: 1;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
     -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

Answer 1

CSS 目前不支持可靠地做到这一点的方法（尽管我认为应该有......）。我只是想说明，你想要一个小图像，然后重复一遍。

这是一个带有many samples的网站

这是custom generator

Answer 2

只需设置一个无缝的background-image: url('some-image.png');。在顶部添加文本可能是在没有background 的嵌套元素中。请注意，您只能使用 CSS3 添加渐变和阴影，而不能添加噪点。

http://jsfiddle.net/AB7nv/

Answer 3

您可以在其上放置一个带有背景图像和不透明度 0.3 或其他内容的 div。