36

WebKitブラウザでオーバーレイなしでCSSを使用して特定の色で画像に色を付けることは可能ですか？

失敗した試行

  • を使用して画像セピアまたは任意の色を着色することhue-rotateができましたが、特定の色で着色する方法を見つけることができませんでした。
  • 「色合い」のSVGフィルターを作成し、それをで呼び出すこと-webkit-filter: url(#tint)はChromeでは機能しません。
  • opacity/ box-shadowcssプロパティとdrop-shadow/ filtersのすべての可能な組み合わせはopacity、望ましい効果を生成しません。

アイデア

  • 色が与えられた場合、 HSBフィルター（ hue-rotate、、）を組み合わせてその色合いを生成することは可能ではないでしょうか？saturationbrightness
4

5 に答える 5

25

最終的には、シェーダーを使用します。フィルターに関する W3C ドキュメントを参照してください。

現時点で可能なことは、たとえば次のとおりです。

-webkit-filter: grayscale; /*sepia, hue-rotate, invert....*/
-webkit-filter: brightness(50%);

見る

更新：

アドビは、サポートされているブラウザーでカスタム フィルター(シェーダー) をサポートするHTML5 ベースのCSS フィルター ラボをリリースしました。

ここに画像の説明を入力

于 2012-09-22T18:28:25.970 に答える
18

スタンドアロンのティント フィルターはありませんが、シェーディングのない既存のフィルターを合成することで一種のティント フィルターを作成できます。

セピアを組み合わせて色を統一してから、色相をローテーションして、色合いを付けたい色にします。

-webkit-filter: sepia(90%) hue-rotate(90deg);

私は色合いにアルファ値を持つボーダーを使用します。これは実際にはオーバーレイですが、他のブラウザーがそれらのフィルターを取得したときにセピア + 色相回転への移行をより簡単にする余分な DOM 要素を使用しません。

于 2013-10-24T10:28:57.463 に答える
13

box-shadow: inset 0px 0px 64px 64px cornflowerblue, 0px 0px 4px 4px cornflowerblue;

任意の色の色合い (どこでもサポートされていないセピアや回転フィルターではなく) は、適切なサイズのボックス シャドウを挿入することで実現できます。

于 2014-06-10T20:21:22.537 に答える
6

では下敷きはいかがでしょうか？

HTML:

<span class="tint"><img src="..." /></span>

CSS:

.tint { background-color:red; display:inline-block; }
.tint img { opacity:0.8 }

必要に応じて色と不透明度を微調整します。透明度のある画像では実際には機能しません。

于 2013-11-20T16:04:17.830 に答える