背景
背景色
设置透明度的颜色值：rgba(xxx,xxx,xxx,opacity)
background-color: { }
背景图像
background-image: { }
是否平铺
background-repeat: no-repeat | repeat-x | repeat-y | repeat;
背景大小
background-size: width height | cover | contain;
| 值 |
描述 |
| cover |
浏览器将使图像足够大，使它完全覆盖了盒子区，同时仍然保持其高宽比 |
| contain |
浏览器将使图像的大小适合盒子内。如果长宽比不同将使一边留有空隙。 |
背景定位
background-position: background-position-x | background-position-y;
background-origin: padding-box | border-box | content-box;
背景绘制区域
background-clip: border-box | padding-box | content-box;
渐变背景
background-image:linear-gradient(to bottom, rgba(255,255,0,0.5), rgba(0,0,255,0.5)),url('https://mdn.mozillademos.org/files/7693/catfront.png');
背景附加
background-attachment: scroll | fixed | local;
| 值 |
描述 |
| scroll |
使元素的背景在页面滚动时滚动。如果滚动了元素内容，则背景不会移动。 |
| fixed |
背景固定在视图端口上，这样当页面或元素内容滚动时，它就不会滚动。 |
| local |
滚动值相当混乱，只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持. |
一句声明
/*
background-color 只能在逗号之后指定。
background-size 值只能包含在背景位置之后，用'/'字符分隔，例如：center/80%。
*/
background: left 5% / 15% 60% repeat-x url("../../media/examples/star.png");
