web-dev-qa-db-ja.com

CSS（任意の形状）を使用して画像を暗くする

そのため、角が丸いものも含めて、CSSを使用して画像を暗くする方法をかなり見ましたが、私の問題は異なります。

私が小さな犬のように見える.png画像を持っているとしましょう（ちょうどそれと一緒に行く、私は良い例はありません）、私はそれを私のページに配置するとき、100 x 100の寸法を与えます。

しかし、私はそれの上に何かをオーバーレイしたり、画像全体に色を付けることはできません。犬の背景も同様に色付けされ、いように見えます。

CSSで任意の形状の画像に色合いを付けることは可能ですか？

（あなたは私のポイントを理解していると仮定し、無駄なコードは必要ありません）

ありがとう！

csspngtint
33
Josiah

代替手段の難しさを考えると、画像の不透明度はいつでも変更できますが、これが最良のアプローチかもしれません。

CSS：

.tinted { opacity: 0.8; }

ブラウザの互換性に興味がある場合は、これを読むことをお勧めします。

http://css-tricks.com/css-transparency-settings-for-all-broswers/

十分に決心していれば、IE7（誰もが知っている！）

注：JGonzalezDが下で指摘しているように、これは実際に背景色が画像自体よりも暗い場合にのみ実際に画像を暗くします。このテクニックは、特に画像を暗くしたくない場合でも、何らかの理由でホバー/フォーカス/その他の状態で強調表示したい場合に役立ちます。

24
Sean

簡単

img {
  filter: brightness(50%);
}
115
The Whiz of Oz

犬のシルエット（黒）の新しいイメージを作成し、残りは元のイメージと同じにします。 htmlで、このシルエットを背景としてラッパーdivを追加します。次に、元の画像を半透明にします。犬は暗くなり、犬の背景は変わりません。ホバー時に元の画像の不透明度を100％に設定することで、ホバートリックを実行できます。それから、あなたが彼の上にマウスを置くと、犬が飛び出します！

スタイル

.wrapper{background-image:url(silhouette.png);} 
.original{opacity:0.7:}
.original:hover{opacity:1}

<div class="wrapper">
  <div class="img">
    <img src="original.png">
  </div>
</div>
2
JSSR

Webkit only solution

簡単な解決策は、 _-webkit-mask-image_ プロパティに依存しています。 _-webkit-mask-image_は、要素のマスク画像を設定します。

この方法にはいくつかの落とし穴があります。

  • 明らかに、Webkitブラウザでのみ動作します
  • _:after_擬似要素（IMGタグに_:before_/_:after_擬似要素、grrを含めることはできません）を適用するには、追加のラッパーが必要です
  • 追加のラッパーがあるため、attr(…) CSS関数を使用してIMGタグURLを取得する方法がわからないため、CSSに個別にハードコーディングされています。

これらの問題を過ぎて見ることができれば、これは可能な解決策かもしれません。 SVGフィルターはさらに柔軟になり、Canvasソリューションはさらに柔軟になり、サポート範囲が広がります（SVGにはAndroid 2.xサポートがありません）。

0
thirdender

background-imageのみに影響を与えたい場合は、次のように線形グラデーションを使用できます。

  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(IMAGE_URL);

暗くする場合はアルファ値を高くし、明るくする場合はアルファ値を低くします

0
Arthur Serafim