14

http://www.kickstarter.comをご覧ください。

ロゴにカーソルを合わせると、画像が点灯します。この効果は、ホバー時に別の画像を使用せずに実行できますか?

私の最初のアイデアは::after:hover、ロゴを覆う透明度の高い白い正方形を使用して追加することでしたが、私のロゴは青色の背景に配置されているため、これは機能しません。もう 1 つのアイデアは、不透明度を 0.9 に設定し、ホバー時に 1 に設定することです。ただし、デフォルトでは画像が暗すぎます。

4

6 に答える 6

34

次のように、CSS 画像フィルターを使用できる場合があります。

img:hover {-webkit-filter: brightness(150%); }


これは時々おかしく見え、webkit ブラウザーでしか機能しませんが、私が考えることができる最良の解決策です。青い背景も保持できます。

これは、青色の背景に Kickstarter のロゴを表示する jsfiddle です。

http://jsfiddle.net/62bCB/



乾杯、

于 2013-11-11T21:50:22.290 に答える
25

私が知る限り、この時点では背景が青いため、純粋な CSS で必要なことを行うことはできません。あなたの最善の策は、フォトショップで画像を編集して:hover明るさを調整し、次のようなものを使用することだと思います。

img { 
  opacity: 0.7; 
} 

img:hover { 
  opacity: 1; 
}

ホバー時に不透明度を変更すると機能します。

img:hover {
   opacity: 0.5;
}

フィドル

于 2013-03-07T15:41:25.507 に答える
2

元の CSS には次のものがあります。

img:hover {
    filter: alpha(opacity=80);
    opacity: .8;
}

フィドル: http://jsfiddle.net/praveenscience/hfUpk/

于 2013-03-07T15:43:03.203 に答える
1

0.1 から 1 の非常に明るい不透明度値と 1 つの値が暗い (デフォルト) の間の不透明度値を使用できます。

img {
    filter: alpha(opacity=100);
    opacity: 1;
}
img:hover {
    filter: alpha(opacity=70);
    opacity: 0.7;
}
于 2016-09-28T07:05:46.110 に答える
1

サポートする必要があるブラウザーに応じて、いくつかの選択肢があります。ロゴを背景画像にして、ホバー時に画像を変更できます。（または、ちらつきがないように画像をスプライトします）

または、古いバージョンの IE で CSS opacity と Microsoft フィルターの組み合わせを試すこともできます。 http://www.w3schools.com/cssref/css3_pr_opacity.asp

背景が暗いとおっしゃっているので、新しい CSS フィルター (彩度、明るさなど) を試すことができますが、IE ではうまくいきません。 http://www.html5rocks.com/en/tutorials/filters/understanding-css/

于 2013-03-07T15:42:48.060 に答える
1

この CSS コードを使用すると、ただちに明るくなるだけでなく、よりスムーズなトランジションをライトアップできます。Techpp.com と Techlivewire.com も、フロントページの特集セクションで、これと同じ css またはそれに類似したものを使用しています。Stackoverflow でエラーが発生し続けたため、CSS をここに投稿できませんでした。http://paste2.org/1L9H2XsF

于 2014-02-16T12:16:24.633 に答える