56

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

小さな犬のように見える .png 画像があるとしましょう (いい例はありません)。それを自分のページに配置するときは、100 x 100 のサイズを指定します。

しかし、その上に何かを重ねたり、画像全体に色を付けたりすることはできません。犬の背景も色付けされてしまい、見栄えが悪くなります。

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

(私の言いたいことは理解していただけると思いますが、無駄なコードは必要ありません)

ありがとう！

4

5 に答える 5

184

簡単に

img {
  filter: brightness(50%);
}
于 2016-12-10T14:55:34.067 に答える
2

犬のシルエット（黒）の新しい画像を作成し、残りは元の画像と同じにします。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>
于 2014-05-09T15:30:59.330 に答える
0

Webkit only solution

迅速な解決策は、プロパティに依存してい-webkit-mask-imageます。-webkit-mask-image要素のマスク イメージを設定します。

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

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

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

于 2013-04-02T14:02:36.273 に答える