html - 身体上的多个背景

Question

不确定这是否可行，但我可以在网站上的标准背景图像上放置一张透明图像。

    body {
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  background: #133e6f url({{ site_img_dir }}/body-bg.gif) repeat-x;
}

这是正常的背景图像。我想在这个不重复的图像上添加另一个透明的 .png。如何才能做到这一点 ？

谢谢

Answer 1

在单个元素上有多个背景：

.myclass {
  background: background1, background2, ..., backgroundN;
}

更复杂的示例：
3 个背景与其他背景属性：
注意1：您可以分别为 3 个背景中的每一个定义background-repeat和background-position（以及其他类似background-size的）属性。

.multi_bg_example {
  /* Background 1, an image   */ background: url(img1),
  /* Background 2, a gradient */ linear-gradient(to right, rgba(255, 255, 255, 0),  rgba(255, 255, 255, 1)),
  /* Background 3, an image   */ url(img3);
  background-repeat: no-repeat, no-repeat, repeat;
  background-position: bottom right, left, right;
}

注意2：第一个出现在顶部，第二个出现在其下方，依此类推......

来源： Mozilla 开发者网络，CSS 多背景：http:
//developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_multiple_backgrounds

Answer 2

只需在昏迷后添加另一个 url，它应该可以工作。

background: url('/images/body-bg.gif'), url('/images/anotherImage.png');
background-repeat: repeat-x;

你可以在这里找到更多信息。

更新

您可以在 jsfiddle 上找到工作示例。对不起，来自谷歌的图片、随机 gif 和 png。