我想要在这里显示效果：
http://jsfiddle.net/abalter/k8G3C/
背景图像是透明的。徽标和文字覆盖。
问题是，我希望背景图像重复-y。宽的视口很好，但是当视口变窄时，文本将通过图像的底部。
如果我做：
body {
background: url(...);
opacity: 0.6;
background-repeat: repeat-y;
}
然后背景会在y方向上重复，但是所有子元素也会变得透明。我还没有找到一种方法来使没有子元素的图像透明。
我正在格式化背景图像，以使其随视口缩放，但始终居中-图像的中间始终在中间。（“仅CSS技术＃2”）
有什么建议么？
涂布不透明度：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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句