現在受け入れられている回答は機能しますが、意味的に正しくなく、いくつかの最適化の恩恵を受けるでしょう。
これには疑似after要素を使用できるため、これに追加のマークアップを導入する必要はありません。したがって、マークアップは次のようになります。
<div id="content"></div>
CSSは冗長ですが、より表現力豊かです。「ラッパー」に実際のコンテンツ(画像)が含まれているのが好きではありませんが、「コンテンツ」は単なる色です。また、div全体をフェードする必要はありませんが、色にアルファチャンネルを使用できます。
#content {
position: relative;
background: url("http://sp9.fotolog.com/photo/41/8/54/butterlyinthebox/1243705008574_f.jpg") no-repeat;
width: 477px;
height: 318px;
}
#content:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(255,0,0,0.5);
pointer-events: none;
}
jsfiddle