如何让透明背景图像重复

Posted 2023-03-06

【中文标题】如何让透明背景图像重复

【英文标题】：How to get a transparent background image to repeat

【发布时间】：2013-09-27 05:36:02

【问题描述】：

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

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

背景图片是透明的。徽标和文字叠加。

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

如果我这样做：

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

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

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

有什么建议吗？

【参考方案1】：

应用 opacity: 0.6; 到 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/