1.背景颜色

属性:background-color/background

属性追:英文单词、十六进制、rgb/rgba()

2.背景图片

属性:background-image

属性值:url()

- 当容器大于背景图片的时候 背景图片默认会进行平铺

- 当容器等于背景图片的时候 背景图片完整显示

- 当容器小于背景图片的时候 背景图片只会显示一部分

注意

- 背景图片是css样式 不占位置的 设置背景图片 必须要容器

- img是结构 是占位置的

3.背景平铺属性

属性:background-repeat(重复)

属性值

- 不平铺 no-repeat

- 默认值 平铺 repeat

- 了解:沿着一个方向平铺 repeat-x/y

4.背景图片的定位

属性:background-position

属性值

- 两个属性值 之间用空格隔开

- 水平方向x: left right center

- 垂直反向y: top bottom center

- 还可以用常规的属性值 数值+单位(正值、负值)

- 简写方式:当水平方向=垂直方向的时候可以简写一个属性值

5.背景固定

属性:background-attachment(位置固定)

属性值:

- scroll 默认值 滚动的

- fixed 常用 固定的

6.简写方式

属性:background

属性值:颜色 图片 平铺 位置 固定

1
2
3
4
5
 

效果图：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！