CSS3 背景

CSS3 背景

背景图片

1. 背景颜色

   属性：background-color

   取值：合法的颜色值 或 transparent

   注意：默认情况下，背景（颜色、图像）是从边框位置处就开始填充

2. 背景图片

   属性：background-image

   取值：url(图像的URL) “xxx"/ ‘xxx’ /xxx

3. 背景平铺

   属性：background-repeat

   取值：repeat：水平方向和垂直方向平铺，默认值
   no-repeat：没有平铺
   repeat-x：仅水平方向平铺
   repeat-y：仅垂直方向平铺

4. 背景图片尺寸

   属性：background-size

   取值：value1 value2;

   cover：覆盖，将背景图扩展至足够大，直到背景图已经覆盖了元素的所有区域。

   contain：包含，将背景图扩大，直到背景图已经碰到某一边缘处（右、下）。

5. 背景图片固定

   属性：background-attachment

   取值：scroll 背景会随文档发生滚动

   ​ fixed 固定

6. 背景定位 改变背景图片在元素中的位置

   属性：background-position

   取值：x y

   关键字：x:left center right

   ​ y:top center bottom

7. backgound（重点）

   取值：color url() repeat attachment position

渐变

1. 渐变语法

   属性：background-image

   取值：linear-gradient() — 线性渐变

   ​ radial-gradient() — 径向渐变

   ​ repeating-linear-gradient() — 重复线性渐变

   ​ repeating-radial-gradient() — 重复径向渐变

2. 线性渐变

   linear-gradient(angle,color-point1,color-point2,…)

   angle:方向（角度）

   ​ to top : 向上 --> 0deg

   ​ to right : 向右 --> 90deg

   ​ to bottom : 向下 --> 180deg

   ​ to left : 向左 --> 270deg

   color-point : 表示颜色的数值 和 位置 red 10px red 0%

   如：background-image:linear-gradient(to top,red 0%,green 50%,blue 100%);

3. 径向渐变

   radial-gradient([size at position],color-point1,color-point2,…);

   size at postion : 可以省略不写

   size : 标识的圆的半径 以 px 为单位

   position : 圆心的位置

   top,left,right,bottom,center 具体数值 百分比