在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

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

http://jsfiddle.net/AB7nv/

Answer 2

CSS目前不支持一种可靠的方法（尽管我认为应该......）。我只想指定，你想要一个小图像，然后重复它。

这是一个many samples

的网站

这是一个custom generator

Answer 3

你可以把一个带有背景图像和不透明度为0.3的div放在它上面。