[解決済み] CSSで背景画像を着色する方法を教えてください。

質問

CSSで背景画像を設定しています。

html {
background-image: url('../img/cello.jpg');
background-attachment: fixed;
background-size: 100%;
}

私はウェブサイトのページごとに異なる背景画像を持つことを計画しています：だから、その上にテキストが読みやすいことが重要です。 今は、このように真ん中の#mainコンテンツボックスの背景を半透明の黒にして、読みやすさを確保するようにしています。

#main {
background: rgba(0, 0, 0, 0.5);
}

でも、本当にやりたいのは、黒い箱がちょっと不格好なので、背景画像全体にそういう半透明の背景をつけることなんです。 そこで <div id=#tint> HTMLドキュメント全体を含む#tintにrgba(0, 0, 0, 0.5)を与えても、全く効果がありません。何も変化しないか、背景全体が単なるグレーになって、背景画像が全く見えなくなってしまいます。 これは単に不可能なのでしょうか？

解決方法は？

オーバーレイ要素を作成する必要があると思います（潜在的に div のように、半透明な背景を求めることができます。こんな感じ。

.overlay {
    z-index: 1;
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: auto;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.7); /*can be anything, of course*/
}

もちろん、ちょっとしたデモも。 リトルリンク .