CSS3的背景属性:background-image属性添加背景图片。不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。
background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
background-size指定背景图像的大小。可以指定像素或百分比大小。你指定的大小是相对于父元素的宽度和高度的百分比的大小。
background-size:80px 60px;// background-size:100% 100%;
background-origin属性指定了背景图像的位置区域。content-box, padding-box,和 border-box区域内可以放置背景图像。
background-origin:content-box;
background-clip背景剪裁属性是从指定位置开始绘制。content-box, padding-box,和 border-box区域内剪裁背景图像。
background-clip: content-box;
CSS3的渐变属性:线性渐变(Linear Gradients)- 向下/向上/向左/向右/对角方向
background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction可以为left(左开始)、to left(到左结束)、left top(左上角)、30deg(角度);
径向渐变(Radial Gradients)- 由它们的中心定义
background: radial-gradient(center, shape size, start-color, ..., last-color);
background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black);
CSS3的rgba透明:rgba() 函数中的最后一个参数可以是从 0 到 1 的值,它定义了颜色的透明度:0 表示完全透明,1 表示完全不透明。