CSS 秘密の花園: Tint_html/css_WEB-ITnose

『CSS Secrets』は @Lea Verou による最新の本で、CSS に関する小さな秘密がいくつか説明されています。これは CSSers にとって読む価値のある本です。一定期間読んだ後、私、@全域と @彦子は、関連する読書感想文を W3cplus で公開し、皆さんと共有します。

質問

グレースケール画像 (またはグレースケールに変換された画像) に色合いを追加すると、非常に異なるスタイルの画像セットに視覚的な調和がもたらされます。そしてエレガントなアプローチ。通常、このようなエフェクトは、:hover またはその他のインタラクションを介して静的に追加および削除されます。

以前は、画像編集プログラムを使用して 2 つのバージョンの画像を作成し、それらを切り替えるための簡単な CSS コードを作成しました。このアプローチは機能しますが、余分な HTTP リクエストが追加されるため、維持が非常に面倒になります。色の効果を変更したい場合を想像してください。すべての画像を準備し、新しい白黒バージョンも作成する必要があります。

2014 年の CSSConf Web サイトでは、この効果を使用してユーザーの写真を表示し、ホバーしてフォーカスしたときにのみフルカラーの元の写真が表示されました。

その他の方法は基本的に、半透明の色を画像の上に直接オーバーレイするか、画像に透明度の値を適用して単色でオーバーレイする方法です。ただし、これは真のカラー グレーディングではありません。画像上のすべての色がターゲット カラーに変換されないだけでなく、コントラストも大幅に低下します。

画像を 要素に変換し、JavaScript 経由で色補正を適用するスクリプトもあります。これにより適切な調子が得られますが、速度が非常に遅く制限があります。

CSS から直接画像に色合いを適用できたらもっと便利だと思いませんか?

フィルターベースのソリューション

このエフェクト専用に設計されたフィルター機能はないため、少しのスキルを使用して複数のフィルターを組み合わせて完成させる必要があります。

最初に適用するフィルターは sepia() で、画像に飽和したオレンジがかった黄色の色合いを与え、ほとんどのピクセルは 35 ～ 40 程度の色相を持ちます。これが希望の色であれば、これで完了です。

ただし、ほとんどの場合、これは当てはまりません。色の彩度が高い場合は、saturate() フィルターを使用して各ピクセルの彩度を高めることができます。画像に hsl(335, 100%, 50%) の色合いを与えたいとします。彩度をかなり増やす必要があるため、パラメーター 4 を使用します。状況に応じて正確な値を選択してください。以下に示すように、このフィルターの組み合わせにより、画像に温かみのある黄金色のトーンが与えられます。

上の画像は元の画像で、下の画像は sepia() フィルターを使用した効果です。

画像は、何もしなければ良く見えます。これを使いたいです。私はオレンジがかった黄色のトーンを持っていますが、それをより暗く明るいピンクに変更したいと思っています。この時点で、hue-rotate() フィルターを適用して、指定した度合いに従って各ピクセルの色相を調整する必要があります。色相を 335 から約 40 に下げるには、パラメータ 295 (335 - 40) を追加する必要があります。

filter: sepia() saturate(4) hue-rotate(295deg);

この時点で画像のトーンが調整されました。下の画像でその効果を確認できます。 。

これが :hover または他の状態でトリガーされるエフェクトである場合、それに CSS トランジションを適用できます:

img {    transition: .5s filter;    filter: sepia() saturate(4) hue-rotate(295deg);}img:hover,img:focus {    filter: none;}

混合モード ソリューション

フィルター ソリューションは機能しますが、結果が画像エディターで得られるものとまったく同じではないことに気づくかもしれません。非常に明るい色で着色したい場合でも、結果はまだ色あせたように見えます。 saturate() フィルター パラメーターの値を大きくしようとすると、別の、より様式化された効果が得られます。ありがたいことに、ブレンド モードというより良い解決策があります。

Adob​​e Photoshop などの画像エディターを使用したことがある場合は、おそらく、ブレンド モードについてはすでによく知っているでしょう。 2 つの要素が重なっている場合、ブレンド モードは、最上位の要素の色がその下の要素の色とどのようにブレンドされるかを制御します。画像のカラー化に関して、必要なカラー ブレンド モードは明度です。明度ブレンディング モードは、上部要素の HSL 輝度を保持し、背景要素の色相と彩度を適用します。背景が適用したい色であり、ブレンド モードが適用される要素がたまたま画像である場合、それがカラー グレーディングの本質ではないでしょうか。

フィルターとブレンド モードの効果を比較します。 上の写真はフィルター効果、下の写真はブレンド モードの効果です。

にブレンド モードを適用します。要素には 2 つのプロパティが使用可能です。要素全体にブレンド モードを適用する mix-blend-mode と、各背景レイヤーにブレンド モードを個別に適用する background-blend-mode です。これは、画像に対してこのメ​​ソッドを使用するには 2 つのオプションがありますが、どちらも理想的ではないことを意味します。

• 把我们的图像和我们想要的颜色的背景颜色放在同一个容器中
• 使用
  ，而不是图像，这样可以把 background-image 设置为我们想要上色的图像，和放在我们的颜色下方的第二个背景图层

根据具体的使用情况，我们在两者中选取一种方法。比如说，如果我们想要为一个 元素应用效果，我们需要把它包裹在另一个元素中。但是，需要我们已经有另一个元素了，如一个 ，我们可以这样使用：

<a href="#something">    <img src="tiger.jpg" alt="Rawrrr!" /></a>

a {    background: hsl(335, 100%, 50%);}img {    mix-blend-mode: luminosity;}

<div class="tinted-image"    style="background-image:url(tiger.jpg)"></div>

.tinted-image {    width: 640px; height: 440px;    background-size: cover;    background-color: hsl(335, 100%, 50%);    background-blend-mode: luminosity;    transition: .5s background-color;}.tinted-image:hover {    background-color: transparent;}