CSSを使用してローキー（黒、透明のオーバーレイ）効果をイメージに追加するにはどうすればよいですか？

私はイメージを透明に見えるようにしようとしていますか？私はそれをどのように記述するのか本当に分かっていませんが、それにテキストを書くことができ、イメージが背中にあるようです。

これはCSSやjavascriptなどの言語で行うことができますか？

2017-01-28 Kat

CSSルールの不透明度や画像 – Roljhon

それは部分的に透明だ、またはあなたはそれが*部分的に透明*することにしたいようにあなたはそれが*ルック*したいを重ねるのdivを使用してかなり簡単？ –

この[リンク]（http://stackoverflow.com/questions/7415872/change-color-of-png-image-via-css）を参照してください他の多くの効果 –

私はあなたが必要と思うのはCSSフィルタです。最新のブラウザが使用these examplesをチェックしてください

：

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

古いブラウザの場合は、使用these examplesをチェックアウト：

img { 
    opacity: 0.3; 
    filter: alpha(opacity=50); /* For IE8 and earlier */ 
}

2017-01-28 17:10:08

しかし、これはまた、テキストの明るさを減少させる私はイメージの上に置く？テキストの色に影響を与えない方法は何ですか？ – Kat

テキスト自体は画像の一部ですか、別のタグにテキストを置き、画像上に配置していますか？最初は動作しませんが後者は動作します。テキストがimgタグ内にネストされていないことを確認してください。 –

をあなたは以下のような画像の上にマスクを追加することができます：

html：

<div> 
<img scr="yourImage.jpg" alt="" /> 
<div class="mask"></div> 
</div>

CSS：

.mask{ 
position:absolute; 
width:100%; 
height:100%; 
background:rgba(0,0,0,0.3); 
}

2017-01-28 17:12:50 CreativeNitish

Matthew Cawleyの言葉通りに不透明度を設定することもできます。（私は望ましい値で両方の効果を適用することを意味する...） –

答えて