ここに示す効果を得たいと思います:
http://jsfiddle.net/abalter/k8G3C/
背景画像は透明です。ロゴとテキストのオーバーレイ。
問題は、背景画像を繰り返すことです-y。広いビューポートでは問題ありませんが、ビューポートを狭くすると、テキストが画像の下部を通過します。
私が行った場合:
body {
background: url(...);
opacity: 0.6;
background-repeat: repeat-y;
}
その後、背景は y 方向に繰り返されますが、すべての子要素も透明になります。子要素なしで画像を透明にする方法が見つかりませんでした。
ビューポートに合わせて拡大縮小するように背景画像をフォーマットしていますが、常に中央に配置されています。画像の中央は常に中央にあります。(「CSS のみの手法 #2」)
助言がありますか?