1

マウスをホバーするとモノクロの画像を作成しようとしています。画像の色はグレースケールに変換され、その後、グレーの色合いがブレンドしている色の色合いに置き換えられます。

このように見えるかもしれません

Photoshop でこれをシミュレートするには、画像をグレースケール化し、目的のカラー レイヤーを上に追加して、スクリーン モードでブレンドします。

私が理解している限り、cssフィルターとbackground-blend-modeを組み合わせるとcssにこの可能性がありますが、フィルターを使用すると結果は常にグレースケールになります。

だから私は、このブレンドを取得する他の方法があるかどうか、または css フィルターを使用せずに画像をグレースケールする方法があるかどうかを尋ねています

4

1 に答える 1

2

ブレンドモードとして明度を使用して、ワンステップでそれを行うことができます。

このモードでは、明度は前面レイヤー (画像) から取得され、色相と彩度は背景 (ここでは単色) から取得されます。

次のデモでは、クラスを介してカラー フィルターを割り当てることもできます。

.test {
    width: 400px;
    height: 200px;    
    margin: 10px;
    background-size: cover;
    background-image:  url(http://placekitten.com/1000/750);
}

.test:hover {
    background-blend-mode: luminosity;
}

.red {
    background-color: red;
}

.green {
    background-color: greenyellow;
}
<div class="test red"></div>
<div class="test green"></div>

画像の黒が（黒の代わりに）完全な飽和色を与える別の解決策。設定が少し複雑ですが、達成可能です。

.test {
    width: 400px;
    height: 200px;    
    background-size: cover;
    background-color: white;
    background-image: linear-gradient(red, red), url(http://placekitten.com/1000/750);
    background-blend-mode: screen, luminosity;
}
<div class="test"></div>

この効果を再利用可能なクラスとして実現する方法。画像はすでに要素上にあり、クラスを設定して効果を設定し、色用に別のクラスを設定しただけです。

したがって、シーケンスは次のようにする必要があります。

  • 最初のレイヤー = 白
  • 2 番目のレイヤーは画像で、ブレンドは明度に設定されています。このようにして、画像の明度が白と組み合わされ、明度が高い場合は白、明度が低い場合は黒になります (つまり、グレースケール フィルター)。
  • 3 番目のレイヤーは単色で、ブレンドがスクリーンに設定されています。これにより、白は白のままですが、黒が色に変わります。

独立したクラスでこれらすべてを簡単に設定できるようにするために、最終的なブレンドに疑似要素を使用する必要があります。これは、 background-blend の代わりに mix-blend で設定されます:

#cat {
    width: 760px;
    height: 560px;
    background-image: url(http://placekitten.com/1000/750); 
}

.test {
    background-color: white;
    background-position: 0px 0px;
    background-size: cover;
    background-blend-mode: luminosity;
    position: relative;
}

.test:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    mix-blend-mode: screen;
    pointer-events: none;
}

.blue:after {
    background-color: blue;
}
<div class="test blue" id="cat"></div>

于 2015-05-04T16:14:54.300 に答える