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

CSSで画像の明るさを下げたい。私は多くを検索しましたが、私が知っているのは、不透明度をどのように変更するかについてですが、それは画像をより明るくします。誰でも私を助けることができますか？CSSで画像の明るさを下げる方法

2012-07-18 Shadi

属性不透明度を使用することができます –

私はそれを使用しましたが、明るさを向上させます... – Shadi

受け入れられた答えはうまくいきますが、将来的に認識したいと思う新しいCSS標準の 'filter'効果もあります。私の答えを見てください。 – Spudley

119

お探しの機能は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:、など）を必要とします。

SVGを使用して、このようなフィルタ効果を加えることもできます。これらのエフェクトのSVGサポートは十分に確立され広くサポートされています（CSSフィルタの仕様は既存のSVG仕様から取られています）

また、これは旧バージョンのIEで利用可能な独自のfilterスタイルと混同しないでください新しいスタイルがベンダープレフィックスを落としたときに名前空間の衝突に関する問題を予測することができます）。

それでも機能しない場合は、既存のopacity機能を使用できますが、考えている方法では使用できません。新しい要素を濃い色で作成し、画像の上に置きます。 opacityを使って消してください。その効果は、暗くなった後ろのイメージになります。

希望に役立ちます。

出典

2012-07-18 06:30:16 Spudley

これは正解です –

-1

要するに

出典

2012-07-18 06:25:23

しかし、それを減らしていない明るさが増えています！ – Shadi

@ shady：不透明度を上げ、リンクhttp://imagecss.com/opacity.htmlにもアクセスしてください。 –

背景色によって異なります。 – zgnilec

.classname 
{ 
opacity: 0.5; 
}

同様に、画像の背後にブラックを配置し、そしてopactiyを下げます。 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>

HereはJSFiddleあります。

出典

2012-07-18 06:28:43 JL235

これは非常にうまくいきます...ありがとうalot – Shadi

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>

DEMO

出典

2012-07-18 06:33:23 sachleen

1アップです。 ..：P –

+22

不透明度は明るくも暗くもありません。これは、オブジェクトの透明度を変更します。これが明るくなるか暗くなるかは、不透明度を変更している項目の背景色によって決まります。あなたが言っているのとは反対に、あなたが黒の背景に置くと、不透明度を上げることによって、何かを暗くすることができます。黒い背景に99％の透明な画像がほぼ黒く表示されます。したがって、別のオーバーレイ部門が必要な理由を確認しないでください。あなたは黒のBGでそれを設定することができます。例：http://jsbin.com/isemec/1/edit – NickG

@NickG私は白い背景を仮定しています。あなたがしたのは私のコードと同じことです。半透明の黒いオーバーレイをイメージの上に置き、不透明な黒の背景に半透明のイメージを上にしています。 – sachleen

あなたが使用することができますCSS3で

filter: brightness(50%); 
-webkit-filter: brightness(50%); 
-moz-filter: brightness(50%); 
-o-filter: brightness(50%); 
-ms-filter: brightness(50%);

出典

2013-09-03 00:41:08

"プレフィックスを念のために投げる"というこのポリシーは間違っています。まずOperaがこれをサポートしていれば、OperaはWebkit/Blinkを使用していないので、プレフィックスのない 'filter 'に直進してしまいます。 IEの '-ms-filter'の構文が異なっている（' progid：DXImageTransform'など）、第5に、Firefoxの構文が異なり、SVGが必要です（[See Docs]（https：// developer com.Mozilla.org/en-US/docs/Web/CSS/filter＃brightness（）））、第6に、ベンダーがアイデアの悪さを認識したために新しい機能がプレフィックスになる可能性は低い –

@CamiloMartin、まだ完全に答えられていないので、この質問に対するより完全な答えを提供しているはずです。 –

-webkit-filter：brightness（）/ -webkit-filter：contrast（）が動作します。これは、質問に対する適切な答えです。 – Shilpa

我々は簡単に画像を調整することができます。しかし、これがイメージを変えないことを忘れないでください。調整された画像のみが表示されます。

詳細については、次のコードを参照してください。コントラストを調整する

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

：明るさを調整する

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

：セピア外観を与えるために

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

：画像のグレーを作るために

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

画像をぼかす

：

img { 
    -webkit-filter: blur(10px); 
    -moz-filter: blur(10px); 
    }

出典

2014-01-19 12:23:56

複数の質問に全く同じ回答を投稿しないでください：それはすべてまたは質問に適していませんそのようにフラグを立てる/閉じなければならない重複です。 – kleopatra

これは正解の良い候補になります。 –

あなたがウェブキットのCSS下記のフィルタ、および例を使用することができます。この例を見てください：http://jsfiddle.net/m9sjdbx6/4/

出典

2014-10-18 19:00:38 GibboK

私はこれを今日見つけました。それは本当に私を助けました。私はこのクールなソリューション持っhttp://www.propra.nl/playground/css_filters/

必要なのは、あなたのCSSスタイルにこれを追加することです。：

div {-webkit-filter: brightness(57%)}

出典

2014-12-07 18:04:53

-webkit-filter: brightness(0.50);

：あなたの場合 https://jsfiddle.net/yLcd5z0h/

出典

2015-03-28 02:31:47

はこれを試します黒の画像を白に変換する必要があります。

.classname{ 
    filter: brightness(0) invert(1); 
}

出典

2018-02-12 18:53:18 Rizo

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

答えて

関連する問題