CSS中的多个背景图片

Backgrounds are not always perfectly tiled repetitions of images. Sometimes they are single images, such as the background image we used in the fixed-width example in the last entry.

背景并非总是完美地平铺图像重复。 有时它们是单个图像，例如我们在最后一个条目的固定宽度示例中使用的背景图像。

After carefully cropping and optimizing the original source of that background image, we can make the result fairly small – around 15K as a JPEG or PNG-8. While this has been the traditional method, there are a few drawbacks:

在仔细裁剪和优化该背景图像的原始来源之后，我们可以使结果相当小-JPEG或PNG-8约为15K。 尽管这是传统方法，但有一些缺点：

• If the background image is not tiled it tends to lead to fixed-width designs, in order to keep the image in place.
  如果未平铺背景图像，则倾向于进行固定宽度的设计，以便将图像固定在适当的位置。
• Much of the file size of the background image is wasted on whitespace.
  背景图像的文件大小大部分浪费在空白上。

• It is impossible to position the individual components of the image via CSS – you can move the image as a whole, but cannot change the spacing between individual components without re-editing the image in PhotoShop and re-exporting.

  无法通过CSS定位图像的各个组件–您可以将图像整体移动，但是如果不在PhotoShop中重新编辑图像并重新导出，就无法更改各个组件之间的间距。

In CSS it is possible to set multiple backgrounds for elements, which means that each of these components could be clipped out as a separate image (using PhotoShop’s Slice tool or similar) and positioned independently. It is simply an extension of the existing background-image property:

在CSS中，可以为元素设置多个背景，这意味着可以将这些组件中的每个组件裁剪为单独的图像(使用PhotoShop的Slice工具或类似工具 )并独立放置。 它只是现有background-image属性的扩展：

div#container {
	background-color: #feffee; 
	background-image:
		url(images/sigil_1.jpg),
	 		url(images/sigil_2.jpg), 
				url(images/sigil_3.jpg); 
	background-repeat: no-repeat;
	background-position:
		2em 2em,
			right 100px,
				12em 10em; 
};

Note that the images and their positions are listed in order, separated by commas. Also note that images can overlap each other. This now makes it possible to move the background images separately, and, if you wish, make the design fluid once more.

请注意，图像及其位置按顺序列出，并以逗号分隔。 另请注意，图像可能会相互重叠。 现在，这使得可以分别移动背景图像，并且，如果需要，可以使设计再次流畅。

翻译自: https://thenewcode.com/72/Multiple-Background-Images-In-CSS