css - 如何获得要重复的透明背景图像

Question

我想得到这里显示的效果:

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

背景图像是透明的。 Logo 和文字叠加层。

问题是，我希望背景图片重复-y。宽视口(viewport)没问题，但当视口(viewport)变窄时，文本会穿过图像底部。

如果我这样做:

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

然后背景在 y 方向重复，但所有子元素也变得透明。我还没有找到一种方法可以在没有子元素的情况下使图像透明。

我正在格式化背景图像，使其随视口(viewport)缩放，但始终居中——图像的中间始终在中间。 ("CSS-Only Technique #2")

有什么建议吗？

Answer 1

应用 opacity: 0.6; 到 body 将使整个页面透明。像这样将 img 更改为 div :

HTML:

<div id="background-image"></div>

Css:现在您需要将背景图像的大小在 x-achse 上设置为 100%，在 y-achse 上设置为 auto 并设置 z-index:0；

#background-image {
  background-image: url(http://www.arielbalter.com/BuzzJoy/img/green_and_roasted_half_and_half.jpg);
  width: 100%;
  top: 0;
  left: 0;
  height:100%; 
  opacity: 0.6;
  position: fixed;
  background-repeat: repeat-y;
  background-size: 100% auto;
  padding: 0;
  margin: 0;
  z-index:0;
}

演示:http://jsfiddle.net/k8G3C/4/