如何获得透明背景图像重复

Question

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

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

背景图像是透明的.徽标和文字叠加.

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

如果我做:

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

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

我正在格式化背景图像,使其与视口一起缩放,但始终居中 - 图像的中间始终位于中间.("CSS-Only Technique#2")

有什么建议？

Answer 1

应用不透明度:0.6; 到正文将使整个页面透明.像这样将img更改为div:

HTML:

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

Css:现在你需要在x-achse上将background-image的大小设置为100%,并将自动设置为y-achse和ad a 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/