css - 如何让透明背景图像重复

Question

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

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

背景图像是透明的。徽标和文字覆盖。

问题是，我希望背景图像重复-y。宽视口很好，但是当视口变窄时，文本会通过图像的底部。

如果我做：

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

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

我正在格式化背景图像，使其随视口缩放，但始终居中 - 图像的中间始终位于中间。（“纯 CSS 技术 #2”）

有什么建议么？

Answer 1

应用不透明度：0.6；to body将使整个页面透明。像这样将 img 更改为 div ：

HTML：

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

Css：现在您需要在 x-achse 上将 background-image 的大小设置为 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/