Question

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

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

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

如果我这样做：

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上将背景图像的大小设置为100％，并将自动设置为y-achse并将广告设置为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/

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

1 个答案: