CSS3学习——背景基本语法-优快云博客

对于CSS的一些基本语法每次要用到的时候总是去重新查阅资料感觉很麻烦，趁着最近重新开始看前端的内容（《HTML5+CSS3+JavaScript网页设计》）。就把一些基本的语法按书整理一下。

有时候因为背景图不一定能够读取到，所以需要设置一个备选项，而这个备选项一般设置为背景色

background-color: 颜色值

设置背景图片：

设置背景图片的属性
属性	属性名称	设置值
background-image	背景图片	url（括号里填写图片的相对路径）
background-repeat	是否重复显示背景图片	repeat：重复并排显示，默认值 repeat-x：只水平方向 repeat-y：只垂直方向 no-repeat：不重复
background-attachment	背景图片是否随着滚动条滚动	fixed（固定） scroll（随滚动条滚动，默认值）
background-position	背景图片位置	x% y% x y [top, center(默认), bottom] [left, center(默认),right] 设置position之前需要设置repeat的值
background	综合应用	可以一次设置所有的背景属性，属性值之间没有前后顺序。以空格分开即可。 eg. background: url() repeat-x fixed 100% 100%
background-size	设置背景尺寸	length（长度） percentage（百分比） cover（缩放到最小边符合组件，不改变长宽比） contain（缩放到元素完全符合组件，不改变长宽比）
background-origin	设置背景原点	padding-box border-box content-box

因为CSS支持多重背景，所以我们可以将两张图片合成一张背景图。

background-image:url(a.jpg),url(b.jpg);

设置背景渐变：linear-gradient(线性渐变)、radial-gradient(原型渐变)。由于gradient还尚未成为CSS标准，实现起来比较麻烦。可以利用Ultimate CSS Gradient Generator来实现。网页网址为http://www.colorzilla.com/gradient-editor/点击打开链接。在网页上操作之后将代码拷下来即可