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

在昏迷后添加另一个网址，它应该可以正常工作。

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

您可以找到更多信息here。

<强>更新

您可以找到工作示例here, on jsfiddle。对不起，谷歌的图片，随机gif和png。

身体上的多个背景

2 个答案: