3

CSSでナビゲーションバーにノイズレイヤーを追加することは可能ですか? このように：

ここに画像の説明を入力

CSS または background-image のいずれかを使用します (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

CSS は現在、これを確実に行う方法をサポートしていません (あるべきだと思いますが...)。私はただ指定したかったのです。小さな画像が必要で、それを繰り返すだけです。

サンプルが豊富なサイトはこちら

そして、これがカスタムジェネレーターです

于 2013-03-01T14:41:27.117 に答える
3

シームレスにセットするだけbackground-image: url('some-image.png');。上にテキストを追加することは、おそらくbackground. グラデーションとシャドウは CSS3 でのみ追加でき、ノイズは追加できないことに注意してください。

http://jsfiddle.net/AB7nv/

于 2013-03-01T13:57:28.223 に答える
0

背景画像と不透明度0.3などのdivをその上に配置できます。

于 2013-03-01T14:25:19.463 に答える