css - CSS で画像の明るさを下げる方法

Question

CSSで画像の明るさを落としたい。私はたくさん検索しましたが、私が持っているのは不透明度を変更する方法だけですが、それは画像をより明るくします. 誰でも私を助けることができますか？

Answer 1

お探しの機能はfilter. 明るさを含むさまざまな画像効果を実行できます。

#myimage {
    filter: brightness(50%);
}

これに関する役立つ記事をここで見つけることができます: http://www.html5rocks.com/en/tutorials/filters/understanding-css/

もう一つ: http://davidwalsh.name/css-filters

そして最も重要なのは、W3C 仕様: https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

これは、機能として CSS に導入されたのはごく最近のことです。利用可能ですが、多くのブラウザーはまだサポートしていません。サポートしているブラウザーでは、ベンダー プレフィックス ( 、 など) が必要になり-webkit-filter:ます-moz-filter。

SVG を使用して、このようなフィルター効果を行うこともできます。これらの効果に対する SVG サポートは十分に確立されており、広くサポートされています (CSS フィルター仕様は既存の SVG 仕様から取られています)。

また、これを古いバージョンの IE で使用できる独自のスタイルと混同しないでくださいfilter(ただし、新しいスタイルがベンダー プレフィックスを削除すると、名前空間の衝突の問題が発生することは予測できます)。

どれもうまくいかない場合でも、既存のopacity機能を使用できますが、考えている方法ではありません。単純に濃い色の新しい要素を作成し、画像の上に配置し、 を使用してフェードアウトしopacityます。後ろの画像が暗くなる効果があります。

最後に、filter こちらのブラウザ サポートを確認できます。

Answer 2

OPは、明るさを増やすのではなく、明るさを減らしたいと考えています。不透明度は、画像を暗くするのではなく、明るくします。

これを行うには、画像の上に黒い div をオーバーレイし、その div の不透明度を設定します。

<style>
#container {
    position: relative;
}
div.overlay {
    opacity: .9;
    background-color: black;
    position: absolute;
    left: 0; top: 0; height: 256px; width: 256px;
}
</style>

Normal:<br />
<img src="http://i.imgur.com/G8eyr.png">
<br />
Decreased brightness:<br />
<div id="container">
    <div class="overlay"></div>
    <img src="http://i.imgur.com/G8eyr.png">
</div>

デモ

Answer 3

以下のCSSフィルターとweb-kitの例を使用できます。この例を見てください: http://jsfiddle.net/m9sjdbx6/4/

    img { -webkit-filter: brightness(0.2);}

Answer 4

あなたがする必要があるのはこれだけであることは明らかです

<img src="https://rb.gy/njdqof" class="IMG">

CSSは次のとおりです

/*if you go lower than 100% the lighting goes dark and above 100% your lighting is brighter*/

.IMG {
  filter: brightness(20%);
}

Answer 5

-webkit-filter: brightness(0.50);

私はこのクールなソリューションを持っています: https://jsfiddle.net/yLcd5z0h/

Answer 6

お気に入り

.classname
{
 opacity: 0.5;
}