4

ここに示す効果を得たいと思います:

http://jsfiddle.net/abalter/k8G3C/

背景画像は透明です。ロゴとテキストのオーバーレイ。

問題は、背景画像を繰り返すことです-y。広いビューポートでは問題ありませんが、ビューポートを狭くすると、テキストが画像の下部を通過します。

私が行った場合:

body {
  background: url(...);
  opacity: 0.6;
  background-repeat: repeat-y;
}

その後、背景は y 方向に繰り返されますが、すべての子要素も透明になります。子要素なしで画像を透明にする方法が見つかりませんでした。

ビューポートに合わせて拡大縮小するように背景画像をフォーマットしていますが、常に中央に配置されています。画像の中央は常に中央にあります。(「CSS のみの手法 #2」)

助言がありますか?

4

1 に答える 1