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

105

CSSで画像の輝度を下げたい。何度も検索しましたが、不透明度を変更する方法しかありませんでしたが、画像が明るくなります。誰か私を助けてもらえますか？

css 
— シャディ
ソース
属性の不透明度を使用できます
— サテンダーシン'18 / 07/18
私はそれを使用しましたが、明るさが増します...
— Shadi
受け入れられた答えはうまく機能filterしますが、将来のために知っておきたい新しいCSS標準効果もあります。私の答えを見てください。
— スパッドリー
1
@shady、親切にこの質問に戻って、フィルターを含むソリューションを提供する回答の1つを正しいものとしてマークしてください。あなたは正しいマークの答えは言う2006年にそれを行うための方法だろう
— ウェス・モード

回答:

175

あなたが探している機能はです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仕様から取得されています）

また、これはfilter古いバージョンのIEで利用可能な独自のスタイルと混同しないように注意してください（ただし、新しいスタイルがベンダープレフィックスを削除すると、名前空間の競合の問題を予測できます）。

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

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

— スパッドリー
ソース
32

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>

デモ

— ザクセン
ソース
24
不透明度は、何も明るくも暗くもしません。オブジェクトの透明度を変更します。これが何かを明るくしたり暗くしたりする効果があるかどうかは、不透明度を変更しているアイテムの背景色によって異なります。あなたが言うこととは逆に、黒の背景に置いた場合、不透明度を上げることで何かを暗くすることができます。黒い背景の99％透明なイメージは、ほぼ黒く表示されます。したがって、別のオーバーレイdivが必要な理由はわかりません。黒のBGにセットするだけです。例：jsbin.com/isemec/1/edit
— NickG
@NickG私は白い背景を想定して言った。あなたがやったことは私のコードと同じです、私は画像の上に半透明の黒いオーバーレイを置き、あなたが上に半透明の画像を備えた不透明な黒い背景を持っています。
— ザクセン、
17

つまり、画像の後ろに黒を配置し、不透明度を下げます。これを行うには、div内で画像をラップし、画像の不透明度を下げます。

例えば：

<!DOCTYPE html>

<style>
    .img-wrap {
        background: black;
        display: inline-block;
        line-height: 0;
    }
        .img-wrap > img {
            opacity: 0.8;
        }
</style>

<div class="img-wrap">
    <img src="http://mikecane.files.wordpress.com/2007/03/kitten.jpg" />
</div>

こちらがJSFiddleです。

— JL235
ソース
15

あなたは使うことができます：

filter: brightness(50%);
-webkit-filter: brightness(50%);
-moz-filter: brightness(50%);
-o-filter: brightness(50%);
-ms-filter: brightness(50%);
— ナホミー・アティアス
ソース
9
「念のため接頭辞を投げましょう」というこの方針は間違っています。最初に、Operaがサポートしない場合-o-（Operaは現在Webkit / Blinkを使用しています）、2番目に、Firefoxが直接接頭辞なしにジャンプしましたfilter。3番目に、順序が間違っています。 IEの構文-ms-filterは異なります（progid:DXImageTransformなど）、5番目、Firefoxの構文は異なり、SVGが必要です（ドキュメントを参照）、6番目、ベンダーがアイデアの悪さを認識しているため、新機能にプレフィックスが付けられない可能性があります
— Camilo Martin
5
@CamiloMartinの場合、まだ完全に回答されていないため、この質問に対するより完全な回答を提供する必要がありました。
— Wesモード
-webkit-filter：bright（）/ -webkit-filter：対照（）は動作します。これは質問に対する適切な答えです。
— シルパ
次のようにsass mixinで使用できます。gist.github.com
— Erez Lieberman
6

CSS3を使用すると、画像を簡単に調整できます。ただし、これによってイメージが変わることはありません。調整された画像のみが表示されます。

詳細については、次のコードを参照してください。

画像を灰色にするには：

img {
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
}

セピア調にするには：

    img {
     -webkit-filter: sepia(100%);
    -moz-filter: sepia(100%);
}

明るさを調整するには：

 img {
     -webkit-filter: brightness(50%);
     -moz-filter: brightness(50%);  
  }

コントラストを調整するには：

 img {
     -webkit-filter: contrast(200%);
     -moz-filter: contrast(200%);    
}

画像をぼかすには：

    img {
     -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
  }
— ラージシャルマ
ソース
1
複数の質問にまったく同じ回答を投稿しないでください。すべての回答に適しているわけではないか、質問が重複しているため、フラグを立てる/クローズする必要があります。
— クレオパトラ2014年
2

背景画像がある場合、これを行うことができます：背景画像にrgba（）グラデーションを設定します。

.img_container {
  float: left;
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  border : 1px solid #fff;
}

.image_original {
  background: url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.image_brighness {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), /* the gradient on top, adjust color and opacity to your taste */
  url(https://i.ibb.co/GkDXWYW/demo-img.jpg);
}

.img_container p {
  color: #fff;
  font-size: 28px;
}
<div class="img_container image_original">
  <p>normal</p>
</div>
<div class="img_container image_brighness ">
  <p>less brightness</p>
</div>
スニペットを展開

— セバスチャン・ジケル
ソース
優れた。背景画像を暗くするための解決策が必要でした。他のすべての回答はdiv全体を暗くします。
— ヌアンデル
0

黒の画像を白に変換する必要がある場合は、これを試してください。

.classname{
    filter: brightness(0) invert(1);
}
— リゾ
ソース
-3

お気に入り

.classname
{
 opacity: 0.5;
}
— サテンダーシン
ソース
ありがとうございますが、明るさを上げても減りません!!
— Shadi、2012
背景色によって異なります。
— 黙示録
右@zgnilecは背景色に依存します...黒にすると、画像の明るさが低下します
— Shadi
これは、100％を超える明るさの増加に対しては機能しません。不透明度は最大で1しか得られません
— Javis Perez
私は英語が話せないので、実際には「不透明度」を検索したいと思っていて、とにかくこの答えを提案しました。この答えが質問に答えない場合でもopacity、明るさが増加することを知っているのは良いことです。;）
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.