HTML(12)——背景属性

目录

背景属性

背景图

背景图平铺方式

背景图位置

背景图缩放

 背景图固定

---

背景属性

属性	描述
background-color	背景色
background-image  (bgi)	背景图
background-repeat  (bgr)	背景图平铺方式
background-position  (bgp)	背景图位置
background-size  (bgz)	背景图缩放
background-attachment  (bga)	背景图固定
background	背景复合属性

背景图

使用背景图实现装饰性的图片效果。

属性值:url(背景图URL) 

背景图默认是平铺的效果

背景图平铺方式

属性值	效果
no-repeat	不平铺
repeat	平铺
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

背景图位置

属性值：水平方向位置，垂直方向位置

关键字

关键字	位置
left	左侧
right	右侧
center	居中
top	顶部
button	底部

关键字取值写法，可以颠倒顺序 

坐标：数字+px    正负都可

可以只写一个关键字，另外一个方向默认居中，坐标只写一个表示水平方向，垂直方向为居中

背景图缩放

常用属性值

• 关键字

 cover：等比缩放背景图片以完全覆盖背景区，可能背景图部分看不见

contain：等比缩放背景图片以完全装入背景区，可能背景区部分空白

• 百分比：根据盒子尺寸计算图片大小
• 数字+单位

 背景图固定

作用：背景图不会随着元素的内容滚动

属性值：fixed

背景复合属性

属性值：背景色 背景图 背景图平铺方式 背景图位置/缩放 背景图固定（属性值之间空格隔开，不区分先后顺序）