0

CSS3ボタンを作ろうとしています。

問題:ボタンにマウスオーバーすると、ボタンの下から白いものが表示されます。この問題を CSS プロパティに絞り込みbackground-position: 0 -15px;ますが、マウスオーバーのグラデーションが変化し、白いものが表示されないようにするにはどうすればよいでしょうか? ありがとう！

JSfiddle: http://jsfiddle.net/7LT35/

4

3 に答える 3

1

「白いもの」はボタンの背景色です。

グラデーション イメージは、ボタンの正確なサイズです。したがって、移動すると、もちろんボタンを覆うことはありません。

個人的には、グラデーション画像を作成して、それでやりたいことをすることをお勧めします。

PS。実際にテストして意図したとおりに動作することを確認しない限り、IE の「ハック」とフィルター プロパティを使用しないでください。

于 2012-06-22T14:23:24.490 に答える
1

background-size値を変更する必要があります。これを .btn に挿入します。

  background-size:1px 53px;

グラデーションを調整してください！それよりも（うまくいけば）うまくいくでしょう！結果は次のとおりです: http://jsfiddle.net/7LT35/6/ しかし、それは正しいグラデーションではないと思います!

于 2012-06-22T14:31:14.370 に答える
0

白いものは背景のグラデーションです。ホバー時に 15px だけ上に移動するように要素に指示しています。

また、ホバー疑似要素ではなく、静的クラスに遷移を配置する必要があります。

.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left: .3em;
  ..more styles

  -webkit-transition: background-position 0.1s linear;
     -moz-transition: background-position 0.1s linear;
      -ms-transition: background-position 0.1s linear;
       -o-transition: background-position 0.1s linear;
          transition: background-position 0.1s linear;
}

.btn:hover {
  color: #333333;
  text-decoration: none;

 background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
 background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
 background-image: linear-gradient(top, #ffffff, #e6e6e6);
 background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);

}

これにより、ホバー時に白/グレーのグラデーションが表示されます。トランジションで何をしたかったのかわからない。

フィドルをチェックしてください

于 2012-06-22T15:10:28.420 に答える