The order of background shorthand attributes: background-color, background-image, background-repeat, background-attachment, background-position, background-size.
body
{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center/100% 100%;
}Note: If you use background-size, be sure to use / to separate
The background has a total of 8 properties to set the shape of the background
- background-color: background color
- background-image: background image
- background-repeat: repeat background image
- background-attachment: whether to be fixed or to scroll with the rest of the page
- background-position: the position of the background image
- background-size: the size of the background
- background-origin: background image positioning area
- background-clip: background image drawing area
next我们依次看一下每个属性的作用和功能：
background-color: background color mdn documentation
Default: transparent The background color is transparent.
background-color: white; // 系统定义的颜色名
background-color: rgb(255,255,255); // rgb 和 rgba 格式
background-color: hsla(120,30%,24%,.3); // hsla() 中的a 是Alpha 通道，表示不透明度,值为0到1
background-image: background image mdn documentation
Default: none
linear-gradient() //创建一个线性渐变的 "图像"(从上到下)
radial-gradient() //用径向渐变创建 "图像"
repeating-linear-gradient() //创建重复的线性渐变 "图像"。
repeating-radial-gradient() //创建重复的径向渐变 "图像"
inherit //指定背景图像应该从父元素继承
background-repeat: repeat background image mdn docs
Property introduction: CSS properties define how the background image repeats. The background image can repeat along the horizontal axis, the vertical axis, both axes, or not at all.background-repeat
Default: repeat The background image will repeat vertically and horizontally
repeat-x // 背景图像将在水平方向重复。
repeat-y // 背景图像将在垂直方向重复。
no-repeat // 背景图像将仅显示一次。
inherit // 规定应该从父元素继承 background-repeat 属性的设置。
Whether the background-attachment is fixed or scrolls with the rest of the page mdn docs
Property introduction: The CSS property determines whether the position of the background image is fixed within the viewport, or scrolls with the block containing it.background-attachment
Default: scroll // The background image will move as the rest of the page is scrolled.
background-attachment: fixed; //当页面的其余部分滚动时，背景图像不会移动。
inherit // 规定应该从父元素继承 background-attachment 属性的设置。
background-position: The position of the background image mdn document
Property introduction: The CSS property sets the initial position for each background image. This position is relative to the position layer defined by background-origin .background-position
Default value: 0% 0%提示：您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
background-position:center; // 居中
background-position:20% 20%;
background-position:top left; // x轴和y轴的设置 还有多种搭配就不一一写了
background-size: the size of the background mdn docs
Attribute introduction: background-size Set the size of the background image. The image can retain its original size, or stretch to a new size, or scale to the size of the element's available space while maintaining its original proportions.
Default: auto
background-size:auto;
//以背景图片的比例缩放背景图片。
ackground-size:80px 60px;
// 第一个值设置宽度，第二个值设置高度。 如果只设置一个值，则第二个值会被设置为 "auto"。
background-size:cover;
//把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
//缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。
background-size:contain;
//把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
//缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。background-origin: background image positioning area mdn document
Attribute introduction: background-origin Specifies the background relative area of the origin position of the background-image attribute of the specified background image.
Note: When using background-attachment as fixed, this attribute will be ignored and has no effect.
Default: padding-box The background image is positioned relative to the padding box.
background-origin:content-box; // 背景图像相对于内边距框来定位。
background-origin:border-box; // 背景图像相对于边框盒来定位。
background-origin:content-box; // 背景图像相对于内容框来定位。
background-clip mdn-documentation
Attribute introduction: Set whether the background (background image or color) of the element extends below the border, padding box, and content box.
Default: border-box // The background is clipped to the border box.
background-clip:padding-box; // 背景延伸至内边距（padding）外沿。不会绘制到边框处。
background-clip:content-box; // 背景被裁剪至内容区（content box）外沿。
background-clip:border-box; // 背景延伸至边框外沿（但是在边框下层）。