CSS的背景属性

CSS

背景相关属性

背景颜色

background-color:#ccc; 

*注*: rgba(alpha)(255,0,0,1(0-1 透明-不透明))

hsl/hsla

h hue 色调 0～360
s saturation 饱和度 0～100%
l lightness 亮度 0～100%

​ color 十六进制 #（0~9a~fA~F） 当#后面的六位字符相同时可以简写三位#000

背景图片(背景图不占位且平铺)

background-image:url();

CSS3中可用多背景(同理position及repeat 用逗号隔开)

background-image:url(),url();

背景图平铺

background-repeat:no repeat/repeat/repeat-x/repeat-y;

背景原点

指定background-origin属性应该是相对位置

属性值：

padding-box 背景图像填充框的相对位置（默认值）

border-box 背景图像边界框的相对位置

content-box 背景图像的相对位置的内容框




背景裁切

background-clip 属性规定背景的绘制区域。

属性值：

border-box 背景被裁剪到边框盒。（默认值）

padding-box 背景被裁剪到内边距框。

content-box 背景被裁剪到内容框。

背景图大小

 background-size:（背景图片宽度 背景图片高度）   

  单位： 长度|百分比|cover|contain

    cover 把背景图片拓展到足够大，以使背景图片完全覆盖背景区域。

    contain 把背景图拓展到最大尺寸，以使宽度和高度完全适应内容区域。

背景图定位(顺序无关)

background-position:left/center/right    top/center/bottom;

                 或  100px (肯定为x)     100px(肯定为y)
注：若只指定一个值 ，则一定是x，第二个值默认垂直居中

背景图固定

 background-attachment:scroll(滚动) /fix(固定 固定后相对于窗口)  ;

简写 background (随意排)

背景线性渐变

标准写法

background:linear-gradient( to 结束的方向值（可以为角度），颜色1，颜色2...); 
（小括号内的参数用逗号隔开）

兼容写法

background:-webkit-linear-gradient(开始的方向值（可以为角度）,颜色1，颜色2...);
（与标准写法的颜色方向相反）
background:-webkit-linear-gradient(left top,red,blue);

背景径向渐变

background: radial-gradient(center, shape, size, start-color, ..., last-color);

center：渐变起点的位置，可以为百分比，默认是图形的正中心。可以为方向值或像素坐标。

shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，
       如果元素形状为正方形的元素，则ellipse和circle显示一样。

size：渐变的大小，即渐变到哪里停止，它有四个值。

closest-side：最近边；

farthest-side：最远边；

closest-corner：最近角；

farthest-corner：最远角。

注：径向只有兼容写法，参数之间用逗号隔开

      特殊情况下：渐变大小和形状需要空格隔开




重复渐变

background:-repeating-linear-gradient(left top,red 5%,blue 10%);

或

background:-repeating-radial-gradient(red 5%,blue 10%);

颜色后加%表示各占比多少。

图片透明度

文字和背景整体透明

opacity:0.5; （0~1）

css3滤镜

filter 函数（）

   filter:blur（5px）; 

blur模糊处理 数值越大越模糊