3

是否可以在 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);
}
4

3 回答 3

3

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

http://jsfiddle.net/AB7nv/

于 2013-03-01T13:57:28.223 回答
3

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

这是一个包含许多示例的站点

这是一个自定义生成器

于 2013-03-01T14:41:27.117 回答
0

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

于 2013-03-01T14:25:19.463 回答