web-dev-qa-db-ja.com

オーバーレイなしのCSSを使用した色合いの画像

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

試行失敗

  • _hue-rotate_を使用して画像のセピアまたは任意の色に色付けすることができましたが、特定の色で色付けする方法が見つかりませんでした。
  • 「色合い」SVGフィルターを作成し、-webkit-filter: url(#tint)で呼び出すことは、Chromeでは機能しません。
  • opacity/_box-shadow_ cssプロパティと_drop-shadow_/opacityフィルターの可能な組み合わせはすべて、目的の効果を生成しません。

アイデア

  • 色を指定すると、HSBフィルター（_hue-rotate_、saturation、brightness）を組み合わせて色合いを生成することはできませんか？
csscss3svgwebkitimage-manipulation
34
hpique

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

現時点では、たとえば次のことが可能です：

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

参照

更新：

Adobeは、HTML5ベースの CSS Filter Labs をサポートし、サポートされているブラウザーで カスタムフィルター （シェーダー）をサポートしています。

enter image description here

23
Lorenz Lo Sauer

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

セピアを組み合わせて色を統一し、色合いを付けたい色に色相回転します

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

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

16
krs

これは、シェーダーを使用せずに、今日SVGフィルターを使用して可能です。 -webkit-filter： "url（#yourfilterID）"などの構文を使用して、これをCSSフィルターとして使用できます（ただしIEでは機能しません）。

<svg width="800px" height="600px" viewbox="0 0 800 600">
    <defs>
        <filter id="f1" x="0%" y="0%" width="100%" height="100%" color-interpolation-filters="sRGB">
        <feColorMatrix id="tinter" type="matrix" values=".6 .6 .6 0 0 
                                                            .2 .2 .2 0 0 
                                                            .0 .0 .0 0 0 
                                                             0    0   0 1 0"/>
        </filter>     
    </defs>

 <image x="0" y="0" width="550" height="370" preserveAspectRatio="true"
    filter="url(#tinter)" xlink:href="http://www.crossfitwaxahachie.com/wp-content/uploads/2012/04/IMG_0752.jpg"/>
</svg>

http://codepen.io/mullany/details/baLkH/ でのダイナミックデモ

16
Michael Mullany

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

あらゆる色の色合い（どこでもサポートされていないセピアや回転フィルターではなく）は、適切なサイズのインセットボックスシャドウによって実現できます。

12
Frevd

では、アンダーレイはどうですか？

HTML：

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

CSS：

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

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

6
DanMan