# 文章目录
# 一、背景
通过 CSS 背景属性,可以给页面元素添加背景样式。
背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。
# 1.1 背景颜色 background-color
语法:
background-color:transparent: color
1
一般情況下元素背景颜色默认值是 transparent(透明),我们也可以手动指定背景颜色为透明色
# 1.2 背景图片 background-image
background- -image.属性描述了元素的肖景图像。实际开发常见于 logo 或者一些装饰性的小图片或者是超大的背景图片,优点是非常便于控制位置(精灵图也是一种运用场景)
语法:
background-image: none | url(url)
1
# 1.3 背景平铺 background-repeat
如果需要在 HTML 页面上对背景图像进行平铺,可以使用 background-repeat 属性。
语法:
background-repeat:repeat | no-repeat | repeat-x | repeat-y
1
注意:默认是平铺的
此外,当我们设置有背景颜色和背景图片的时候,颜色在图片之下。
div {
width: 500px;
height: 500px;
background-color: teal;
background-image: url(./media/pig.jpg);
background-repeat: no-repeat;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
效果:
# 1.4 背景图片位置 background-position
利用 background-position 属性可以改变图片在肯景中的位置
background-position:x y
1
参数代表的意思是:X 坐标和 Y 坐标。可以使用方位名词或者精确单位
参数值 | 说明 |
---|---|
length | 百分数」由浮点数字和单位标识符组成的长度值 |
position | top |
注意事项:
参数是方位名词
- 如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
- 如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
参数是精确坐标
- 第一个必须是 x,第二个必须是 y
- 如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
混合参数
- 如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 X 坐标,第二个值是 y 坐标
示例:
div {
width: 500px;
height: 500px;
background-color: teal;
background-image: url(./media/pig.jpg);
background-repeat: no-repeat;
background-position: left bottom;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
效果:background-position:left bottom;
background-position:center center;
示例:background-position: 20px 50px;
div {
width: 500px;
height: 500px;
background-color: pink;
background-image: url(./media/pig.jpg);
background-repeat: no-repeat;
background-position: 20px 50px;
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
效果:
# 1.5 背景图像固定 background-attachment
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
background- attachment 后期可以制作视差滚动的效果。
语法:默认 scroll
backgroound-attachment:scroll | fixed
1
# 1.6 背景色半透明 rgba
background:rgba(0,0,0,0.3)
1
# 二、总结
属性 | 作用 | 值 |
---|---|---|
background-color | 背景颜色 | 预定义的颜色值/十六进制/RGB 代码 |
background-image | 背景图片 | urI(图片路径) |
background-repeat | 是否平铺 | repeat/no-repeat/repeat-x/repeat-y |
background-position | 背景位置 | ength/position 分别是 x 和 y 坐标 |
background-attachment | 背景附着 | scroll(肯景滚动)/ fixed(背景固定) |
背景简写 | 书写更简单 | 背景颜色 背景图片 地址 背景平铺 背景滚动 背景位置 |
背景色半透明 | 背景颜色半透明 background:rgba(0,0,003): | 后面必须是 4 个值 |