2

cssのいくつかの画像でinvert（）を使用すると、正しく反転されますが（ここに私の問題があります）、invert（）を再度実行して通常に戻すと、まったく同じではありません。明るさやコントラストが変化し、少し色あせています。これはなぜですか、それを回避する方法は何ですか? ある種の revert() 関数はありますか? invert() は画像に対して正確に何をしているのでしょうか?

ティア！

アップデート; これは、問題を理解するための最良の方法です (コメント付き): http://jsbin.com/uzicaz/2/edit

4

2 に答える 2

2

2 つの異なるセレクターを使用して、同じ CSS ディレクティブを適用しています。

これを行うと、ディレクティブは 2 回適用されません。それらの 1 つは、他のものによってオーバーライドされます。

ここに画像の説明を入力

重要度の低いものがキャンセルされ、重要度の高いものが適用されます。ただし、この 2 つは同一であるため、ディレクティブは 1 回適用されます。

最初の宣言を再度適用せずにキャンセルするにnoneは、2 番目の宣言でディレクティブを次のように設定します。 

img {
  -webkit-filter: invert() brightness(100%) contrast(100%);
}

#photo1 {
  -webkit-filter: none;
}

PSこのinvert() brightness(100%) contrast(100%)組み合わせは、私にとって真っ白な画像を生成します。空白にしようとしている場合は、visibility: hidden;代わりに使用してください。

于 2013-03-29T07:09:04.007 に答える
1

実際、本当に必要なものはもっと簡単だと思います。画像をそのまま維持したい場合は、次のようにします。

img {
  -webkit-filter: invert();
}

#photo1 {
   -webkit-filter: none;

}

あなたのソリューションです。img は反転されますが (または必要に応じて反転されます)、id = photo1 の img は反転しません。要素の効果を元に戻すのではなく、オーバーライドしているので、変換が行われないことに注意してください。

于 2013-03-29T11:10:49.750 に答える