57

要素が 100% の彩度、不透明度などであると仮定すると、ホバーしたときに背景を少し明るくするにはどうすればよいですか?

ユースケースは、ユーザーがページ上の任意の要素にカーソルを合わせることができるようにすることです。各色が 80% の不透明度に相当するかどうかを判断したくありません。

1つの方法はを変更することopacity: 0.4ですが、背景だけを変更したいです。

4

7 に答える 7

10

これを行うには、RGBa メソッド ( background-color:rgba(R,G,B,alpha);) を使用する必要があります。

.element{
    background-color:rgba(0,0,0,1); /*where 1 stands for 100% opacity*/
} 
.element:hover{
    background-color:rgba(0,0,0,0.5); /*where 0.5 stands for 50% opacity*/
}

フィドル

また、IE8以下でも動作させる必要がある場合は、次のようになります。 

.element:hover{
background: transparent;
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000)"; /* IE8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);   /* IE6 & 7 */
      zoom: 1;
}

startColorstrとのendColorstr値はこのように作成され#AARRGGBB(AA はアルファ チャネル)、ある色から別の色へのグラデーション効果が必要ない場合は同じでなければならないことに注意してください。

于 2013-04-23T20:22:09.353 に答える