css样式背景中加背景_CSS多背景

css样式背景中加背景

Anyone that's been in the web development industry for 5+ years knows that there are certain features that we should have had several years ago. One of those features is the HTML5 placeholder; we used JavaScript shims for a decade before placeholder came along. Another one of those simple features is multiple background images with CSS. Instead we'd need to nest another element for every additional background image. Now we a syntax for supporting multiple background images on one element, and here's what it looks like.

在Web开发行业从事5年以上的任何人都知道，几年前我们应该拥有某些功能。 这些功能之一是HTML5占位符 ； 在占位符出现之前，我们使用JavaScript填充片已有十年之久。 这些简单功能中的另一个功能是带有CSS的多个背景图片。 相反，我们需要为每个其他背景图像嵌套另一个元素。 现在，我们使用一种语法在一个元素上支持多个背景图像，这就是它的外观。

View Demo 观看演示

CSS (The CSS)

Multiple backgrounds involved using multiple property assignments with multiple values, separated by a comma:

多个背景涉及使用多个属性分配和多个值(以逗号分隔)：

#multipleBGs {
	background: url(photo1.png),
				url(photo2.png),
				url(photo3.png)
	;
	background-repeat: no-repeat,
					   no-repeat,
					   repeat-y;
						
	background-position: 0 0,
						 30px 70px,
						 right top;
	
	width: 400px; 
	height: 400px;
	border: 1px solid #ccc;
}

Trying to stuff all properties via shorthand within the background property wont work, unfortunately; multiple property declarations must be used. All of the background properties may be used (background-attachment , background-clip , background-image , background-origin , background-position , background-repeat , background-size), as well as CSS gradients.

不幸的是，试图通过速记将所有属性填充到后台属性中是行不通的； 必须使用多个属性声明。 可以使用所有背景属性(background-attachment，background-clip，background-image，background-origin，background-position，background-repeat，background-size)以及CSS渐变。

View Demo 观看演示

Another awesome CSS feature that we can finally used. Using multiple CSS backgrounds is an incredible useful tool, preventing the need for nested elements for the sole purpose of formatting.

我们终于可以使用的另一个很棒CSS功能。 使用多个CSS背景是一种令人难以置信的有用工具，可避免仅出于格式化目的就需要嵌套元素。

翻译自: https://davidwalsh.name/css-multiple-background

css样式背景中加背景