背景图属性

.引入背景图片:background-image:url();

png支持背景透明，jpg不支持背景透明。

设置背景图片大小：background-size

6.背景图片的显示原则

a.容器尺寸等于图片尺寸，背景图片正好显示在容器中；

b.容器尺寸大于图片尺寸，背景图片将默认平铺，直至铺满元素；

c.容器尺寸小于图片尺寸，只显示容器/元素/范围以内的背景图。

补充：网页上有两种图片形式：插入图片、背景图；

插入图片：属于网页内容，也就是结构。

背景图：属于网页的表现，背景图上可以显示文字、插入图片、表格等。

7.背景图片平铺属性

语法：background-repeat:no-repeat/repeat/repeat-x/repeat-y

no-repeat:不平铺  

repeat:平铺  

repeat-x:横向平铺

repeat-y:纵向平铺

8.背景图定位 （水平方向-正值为右 垂直方向-正值为下）

background-position:

水平方向值：left/center/right或数值

垂直方向值： top/center/bottom或数值

简写

引入多个背景图

9.背景图的固定

语法：选择符{background-attachment:scroll(滚动)默认的/fixed(固定);}

说明：记得用在有滚动条的地方；

10.各属性的缩写语法：

选择符{background：属性值1 属性值2 属性值3;}

11.背景色半透明

语法：background：rgba（0,0,0,0.3）；

transparent 为透明色

1.最后一个参数是alpha透明度，取值范围在0~1之间

2.我们习惯把0.3的0给省略，写为background：rgba（0,0,0,.3）；

12、新增颜色模式

1.rgba(r,g,b,a)

【Red 0-255,Green 绿 0-255,Blue 蓝 0-255,透明度 .0-1】;

2.HSLA(h,s,l,a)

【H 色调 取值为：0-360,过渡为：(红橙黄绿青蓝紫红) ,

  S饱和度 取值为：0.0% - 100.0% ,

  L 亮度 取值为：0.0% - 100.0%，50%是平衡值,

  A 透明度取值0~1之间】

3.元素全透明：opacity

  背景透明，文字不透明：background：rgba（r,g,b,a）

13、背景属性

1.background-size

属性值：

（1）数值、百分比:水平方向 垂直方向;[可能发生扭曲]

（2）cover:覆盖，背景图片完全覆盖容器[可能会丢失一部分图片,不会发生扭曲]

（3）contain:包含，容器完全包含背景图片[容器可能会出现空白区域]（背景图不会发生扭曲和丢失）

*轮播图，ui一般会给一张超级大的图片

轮播图的做法：

引入背景图background-image、设置背景图大小background-size:cover、背景图定位background-position:center center;

2.background-origin 背景的定位区域（背景的起始点）

说明：background-origin属性应该是相对定位

换句话说，就是background-position的原点（0，0）在哪个区域的左上角

注意区分：background-position 背景在容器的定位区域的什么位置摆放

属性值：

padding-box（padding以内，默认）

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

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

3.background-clip 背景裁剪

说明：background-clip属性规定背景的绘制区域

属性值：

padding-box背景被裁剪到内边距框（默认）

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

border-box背景被裁剪到边框盒