css背景图片

一如何设置背景图片?
1、在css中有一个叫做background-image:url()的属性就是专门用于设置背景图片的
2、如果图片的大小没有标签的大小大,那么会自动在水平和垂直方向平铺和填充
3、如果网页上出现了图片,那么浏览器会再次发送请求获取图片

二如何控制背景图片的平铺方式?
1、在css有一个background-repeat 属性就是专门用于控制背景图片的平铺方式

2、取值
repeat 默认,在水平和垂直都需要平铺
no-repeat 在水平和垂直都 不需要平铺
repeat - x 在水平方向平铺
repeat - y 在垂直方向平铺

应用场景:
可以通过背景图片的平铺来降低图片的大小,提升网页的访问速度

注意点:
同一个标签可以同时设置背景颜色和背景图片,如果颜色和图片同时存在,那么图片会覆盖颜色

三如何控制背景图片的位置?
1、在css中有一个叫做background-position:属性就是专门用于控制背景图片的位置

2、格式:
background-position:水平方向、垂直方向

3、取值
3.1具体的方位名词
水平方向:left center right
垂直方向:top center bottom
例如 background-position:left center

3.2具体的像素
例如 background-position:100px 200px
px 单位一定要写
具体的像素是可以写负数的 例如 background-position:-100px -200px

四、什么是背景关联方式?
1、默认情况下背景图片会随着滚动条的滚动而滚动,如果不想让背景图片随着滚动条的滚动而滚动,那么我们就可以修改背景图片和滚动条的关联方式

2、如何修改背景图片的关联方式?
在css中有一个叫做background-attachment的属性这个属性就是专门用于修改背景图片的关联方式

格式
background-attachment:scroll

取值
scroll默认值 会随着滚动条的滚动而滚动
fixed 不会随着滚动条的滚动而滚动